@underpostnet/underpost 2.96.1 → 2.97.1

package/src/cli/lxd.js

@@ -74,8 +74,8 @@ class UnderpostLxd {
       const npmRoot = getNpmRootPath();
       const underpostRoot = options?.dev === true ? '.' : `${npmRoot}/underpost`;
       if (options.reset === true) {
-        shellExec(`sudo systemctl stop snap.lxd.daemon || true`);
-        shellExec(`sudo snap remove lxd --purge || true`);
+        shellExec(`sudo systemctl stop snap.lxd.daemon`);
+        shellExec(`sudo snap remove lxd --purge`);
       }
       if (options.install === true) shellExec(`sudo snap install lxd`);
       if (options.init === true) {
@@ -213,7 +213,7 @@ ipv6.address=none`);
         for (const port of ports.split(',')) {
           for (const protocol of protocols) {
             const deviceName = `${vmName}-${protocol}-port-${port}`;
-            shellExec(`lxc config device remove ${vmName} ${deviceName} || true`); // Use || true to prevent error if device doesn't exist
+            shellExec(`lxc config device remove ${vmName} ${deviceName}`); // Use to prevent error if device doesn't exist
             shellExec(
               `lxc config device add ${vmName} ${deviceName} proxy listen=${protocol}:${hostIp}:${port} connect=${protocol}:${vmIp}:${port} nat=true`,
             );

package/src/cli/run.js

@@ -57,6 +57,7 @@ class UnderpostRun {
    * @property {boolean} force - Whether to force the operation.
    * @property {boolean} reset - Whether to reset the operation.
    * @property {boolean} tls - Whether to use TLS.
+   * @property {string} cmd - The command to run in the container.
    * @property {string} tty - The TTY option for the container.
    * @property {string} stdin - The stdin option for the container.
    * @property {string} restartPolicy - The restart policy for the container.
@@ -87,6 +88,7 @@ class UnderpostRun {
    * @property {string} deployId - The deployment ID.
    * @property {string} instanceId - The instance ID.
    * @property {string} user - The user to run as.
+   * @property {string} pid - The process ID.
    * @memberof UnderpostRun
    */
   static DEFAULT_OPTION = {
@@ -104,6 +106,7 @@ class UnderpostRun {
     force: false,
     reset: false,
     tls: false,
+    cmd: '',
     tty: '',
     stdin: '',
     restartPolicy: '',
@@ -134,6 +137,7 @@ class UnderpostRun {
     deployId: '',
     instanceId: '',
     user: '',
+    pid: '',
   };
   /**
    * @static
@@ -187,6 +191,7 @@ class UnderpostRun {
      * @memberof UnderpostRun
      */
     kill: (path = '', options = UnderpostRun.DEFAULT_OPTION) => {
+      if (options.pid) return shellExec(`sudo kill -9 ${options.pid}`);
       for (const _path of path.split(',')) {
         if (_path.split('+')[1]) {
           let [port, sumPortOffSet] = _path.split('+');
@@ -564,7 +569,7 @@ class UnderpostRun {
       const currentTraffic = isDeployRunnerContext(path, options)
         ? UnderpostDeploy.API.getCurrentTraffic(deployId, { namespace: options.namespace })
         : '';
-      let targetTraffic = currentTraffic ? (currentTraffic === 'blue' ? 'green' : 'blue') : '';
+      let targetTraffic = currentTraffic ? (currentTraffic === 'blue' ? 'green' : 'blue') : 'green';
       if (targetTraffic) versions = targetTraffic;
 
       shellExec(
@@ -574,8 +579,13 @@ class UnderpostRun {
       );
 
       if (isDeployRunnerContext(path, options)) {
+        const cmdString = options.cmd
+          ? ` --cmd ${options.cmd.find((c) => c.match('"')) ? `"${options.cmd}"` : `'${options.cmd}'`}`
+          : '';
         shellExec(
-          `${baseCommand} deploy --kubeadm --disable-update-proxy ${deployId} ${env} --versions ${versions}${options.namespace ? ` --namespace ${options.namespace}` : ''}`,
+          `${baseCommand} deploy --kubeadm${cmdString} --replicas ${
+            replicas
+          } --disable-update-proxy ${deployId} ${env} --versions ${versions}${options.namespace ? ` --namespace ${options.namespace}` : ''}`,
         );
         if (!targetTraffic)
           targetTraffic = UnderpostDeploy.API.getCurrentTraffic(deployId, { namespace: options.namespace });
@@ -915,7 +925,7 @@ EOF
         shellExec(`docker exec -i kind-worker bash -c "mkdir -p ${volumeHostPath}"`);
         shellExec(`docker cp ${volumeHostPath}/engine kind-worker:${volumeHostPath}/engine`);
         shellExec(
-          `docker exec -i kind-worker bash -c "chown -R 1000:1000 ${volumeHostPath} || true; chmod -R 755 ${volumeHostPath}"`,
+          `docker exec -i kind-worker bash -c "chown -R 1000:1000 ${volumeHostPath}; chmod -R 755 ${volumeHostPath}"`,
         );
       } else {
         shellExec(`kubectl apply -f ${options.underpostRoot}/manifests/pv-pvc-dd.yaml -n ${options.namespace}`);
@@ -1157,6 +1167,7 @@ EOF
      * @memberof UnderpostRun
      */
     cluster: async (path = '', options = UnderpostRun.DEFAULT_OPTION) => {
+      const { underpostRoot } = options;
       const env = options.dev ? 'development' : 'production';
       const baseCommand = options.dev ? 'node bin' : 'underpost';
       const baseClusterCommand = options.dev ? ' --dev' : '';
@@ -1166,12 +1177,16 @@ EOF
       await timer(5000);
       shellExec(`${baseCommand} cluster${baseClusterCommand} --${clusterType}`);
       await timer(5000);
-      let [runtimeImage, deployList] = path.split(',')
-        ? path.split(',')
-        : ['express', fs.readFileSync(`./engine-private/deploy/dd.router`, 'utf8').replaceAll(',', '+')];
+      let [runtimeImage, deployList] =
+        path && path.trim() && path.split(',')
+          ? path.split(',')
+          : [
+              'express',
+              fs.readFileSync(`${underpostRoot}/engine-private/deploy/dd.router`, 'utf8').replaceAll(',', '+'),
+            ];
       shellExec(
-        `${baseCommand} image${baseClusterCommand}${
-          runtimeImage ? ` --pull-base --path /home/dd/engine/src/runtime/${runtimeImage}` : ''
+        `${baseCommand} image${baseClusterCommand} --build ${
+          runtimeImage ? ` --pull-base --path ${underpostRoot}/src/runtime/${runtimeImage}` : ''
         } --${clusterType}`,
       );
       if (!deployList) {
@@ -1246,7 +1261,7 @@ EOF
     'disk-clean': async (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const { underpostRoot } = options;
       shellExec(`chmod +x ${underpostRoot}/scripts/disk-clean.sh`);
-      shellExec(`./scripts/disk-clean.sh --yes --aggressive`);
+      shellExec(`./scripts/disk-clean.sh`);
     },
 
     /**
@@ -1405,7 +1420,7 @@ EOF
         shellExec(
           `${baseCommand} deploy${options.dev ? '' : ' --kubeadm'}${options.devProxyPortOffset ? ' --disable-deployment-proxy' : ''} --disable-update-deployment ${deployId} ${env} --versions ${versions}`,
         );
-      } else logger.error('Mongo Express deployment failed');
+      } else logger.error(`Service pod ${podToMonitor} failed to start in time.`);
       if (options.etcHosts === true) {
         const hostListenResult = UnderpostDeploy.API.etcHostFactory([host]);
         logger.info(hostListenResult.renderHosts);
@@ -1447,6 +1462,32 @@ EOF
       console.log(result);
     },
 
+    /**
+     * @method ps
+     * @description Displays running processes that match a specified path or keyword.
+     * @param {string} path - The input value, identifier, or path for the operation (used as a keyword to filter processes).
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    ps: async (path = '', options = UnderpostRun.DEFAULT_OPTION) => {
+      const out = shellExec(`ps aux${path ? `| grep '${path}' | grep -v grep` : ''}`, {
+        stdout: true,
+        silent: true,
+      });
+      console.log(path ? out.replaceAll(path, path.bgYellow.black.bold) : out);
+    },
+
+    /**
+     * @method ptls
+     * @description Set on ~/.bashrc alias: ports <port> Command to list listening ports that match the given keyword.
+     * @param {string} path - The input value, identifier, or path for the operation (used as a keyword to filter listening ports).
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    ptls: async (path = '', options = UnderpostRun.DEFAULT_OPTION) => {
+      shellExec(`chmod +x ${options.underpostRoot}/scripts/ports-ls.sh`);
+      shellExec(`${options.underpostRoot}/scripts/ports-ls.sh`);
+    },
     /**
      * @method release-cmt
      * @description Commits and pushes a new release for the `engine` repository with a message indicating the new version.
@@ -1462,6 +1503,31 @@ EOF
       shellExec(`underpost push . ${process.env.GITHUB_USERNAME}/engine`, { silent: true });
     },
 
+    /**
+     * @method deploy-test
+     * @description Deploys a test deployment (`dd-test`) in either development or production mode, setting up necessary secrets and starting the deployment.
+     * @param {string} path - The input value, identifier, or path for the operation (used as the deployment ID).
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    'deploy-test': async (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      // Note: use recomendation empty deploy cluster: node bin --dev cluster
+      const env = options.dev ? 'development' : 'production';
+      const baseCommand = options.dev ? 'node bin' : 'underpost';
+      const baseClusterCommand = options.dev ? ' --dev' : '';
+      const inputs = path ? path.split(',') : [];
+      const deployId = inputs[0] ? inputs[0] : 'dd-test';
+      const cmd = options.cmd
+        ? options.cmd
+        : [
+            `npm install -g npm@11.2.0`,
+            `npm install -g underpost`,
+            `${baseCommand} secret underpost --create-from-file /etc/config/.env.${env}`,
+            `${baseCommand} start --build --run ${deployId} ${env} --underpost-quickly-install`,
+          ];
+      shellExec(`node bin run sync${baseClusterCommand} --cron-jobs none dd-test --cmd "${cmd}"`);
+    },
+
     /**
      * @method sync-replica
      * @description Syncs a replica for the dd.router
@@ -1597,7 +1663,7 @@ ${hostNetwork ? `  hostNetwork: ${hostNetwork}` : ''}
       imagePullPolicy: ${imagePullPolicy}
       tty: ${tty}
       stdin: ${stdin}
-      command: ${JSON.stringify(options.command ? options.command : ['/bin/bash', '-c'])}
+      command: ${JSON.stringify(options.cmd ? options.cmd : ['/bin/bash', '-c'])}
 ${
   args.length > 0
     ? `      args:
@@ -1649,7 +1715,7 @@ EOF`;
       try {
         const npmRoot = getNpmRootPath();
         const underpostRoot = options?.dev === true ? '.' : `${npmRoot}/underpost`;
-        if (options.command) options.command = options.command.split(',');
+        if (options.cmd) options.cmd = options.cmd.split(',');
         if (options.args) options.args = options.args.split(',');
         if (!options.underpostRoot) options.underpostRoot = underpostRoot;
         if (!options.namespace) options.namespace = 'default';

package/src/cli/ssh.js

@@ -280,7 +280,7 @@ EOF`);
             options.password = confNode.users[options.user].password;
             logger.info(`Using saved password for user ${options.user}`);
           }
-          options.port = confNode.users[options.user].port || options.port;
+          options.port = options.port || confNode.users[options.user].port || 22;
         }
       }
 

package/src/client/components/core/Css.js

@@ -865,10 +865,17 @@ const subThemeManager = {
       return html`<style>
         button:hover,
         .a-btn:hover,
-        .main-btn-menu-active {
+        .main-btn-menu-active,
+        .top-bar-search-box-container:hover {
           color: ${this.lightColor};
           background-color: ${lightenHex(this.lightColor, 0.8)};
         }
+        .top-bar-search-box-container i {
+          color: #000;
+        }
+        .top-bar-search-box-container:hover i {
+          color: ${this.lightColor};
+        }
         .main-sub-btn-active {
           color: ${this.lightColor};
           background-color: rgba(0, 0, 0, 0.3);
@@ -887,10 +894,17 @@ const subThemeManager = {
       return html`<style>
         button:hover,
         .a-btn:hover,
-        .main-btn-menu-active {
+        .main-btn-menu-active,
+        .top-bar-search-box-container:hover {
           color: ${lightenHex(this.darkColor, 0.8)};
           background-color: ${darkenHex(this.darkColor, 0.75)};
         }
+        .top-bar-search-box-container i {
+          color: #fff;
+        }
+        .top-bar-search-box-container:hover i {
+          color: ${lightenHex(this.darkColor, 0.8)};
+        }
         .main-sub-btn-active {
           color: ${lightenHex(this.darkColor, 0.8)};
           background-color: rgba(255, 255, 255, 0.3);

package/src/client/components/core/Input.js

@@ -162,7 +162,9 @@ const Input = {
           break;
         }
         case 'md':
-          RichText.Tokens[inputData.id].easyMDE.value('');
+          setTimeout(() => {
+            RichText.Tokens[inputData.id].easyMDE.value('');
+          });
           continue;
           break;
         case 'checkbox':

package/src/client/components/core/Modal.js

@@ -34,6 +34,7 @@ import { Badge } from './Badge.js';
 import { Worker } from './Worker.js';
 import { Scroll } from './Scroll.js';
 import { windowGetH, windowGetW } from './windowGetDimensions.js';
+import { SearchBox } from './SearchBox.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
@@ -549,6 +550,9 @@ const Modal = {
             const inputInfoNode = s(`.input-info-${inputSearchBoxId}`).cloneNode(true);
             s(`.input-info-${inputSearchBoxId}`).remove();
             {
+              // Inject SearchBox base styles
+              SearchBox.injectStyles();
+
               const id = 'search-box-history';
               const searchBoxHistoryId = id;
               const formDataInfoNode = [
@@ -591,6 +595,7 @@ const Modal = {
 
               const renderSearchResult = async (results) => {
                 htmls(`.html-${searchBoxHistoryId}`, '');
+
                 if (results.length === 0) {
                   append(
                     `.html-${searchBoxHistoryId}`,
@@ -609,108 +614,61 @@ const Modal = {
                       }),
                     }),
                   );
+                  return;
                 }
-                let indexResult = -1;
-                for (const result of results) {
-                  indexResult++;
-                  const indexRender = indexResult;
-                  append(
-                    `.html-${searchBoxHistoryId}`,
-                    await BtnIcon.Render({
-                      label: `${
-                        result.fontAwesomeIcon
-                          ? html`<i class="${result.fontAwesomeIcon.classList.toString()}"></i> `
-                          : result.imgElement
-                            ? html`<img
-                                class="inl"
-                                src="${result.imgElement.src}"
-                                style="${renderCssAttr({ style: { width: '25px', height: '25px' } })}"
-                              />`
-                            : ''
-                      } ${Translate.Render(result.routerId)}`,
-                      class: `wfa search-result-btn-${result.routerId} ${
-                        indexResult === currentKeyBoardSearchBoxIndex ? 'main-btn-menu-active' : ''
-                      } search-result-btn-${indexResult}`,
-                      style: renderCssAttr({
-                        style: { padding: '3px', margin: '2px', 'text-align': 'left' },
-                      }),
-                    }),
-                  );
-                  s(`.search-result-btn-${result.routerId}`).onclick = () => {
-                    if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
-                    s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                      `main-btn-menu-active`,
-                    );
-                    currentKeyBoardSearchBoxIndex = indexRender;
-                    s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                      `main-btn-menu-active`,
-                    );
-                    setSearchValue(`.search-result-btn-${result.routerId}`);
-                  };
-                }
+
+                // Use SearchBox component for rendering results
+                const searchContext = {
+                  RouterInstance: Worker.RouterInstance,
+                  options: options,
+                  onResultClick: () => {
+                    // Dismiss search box on result click
+                    if (s(`.${searchBoxHistoryId}`)) {
+                      Modal.removeModal(searchBoxHistoryId);
+                    }
+                  },
+                };
+
+                SearchBox.renderResults(results, `html-${searchBoxHistoryId}`, searchContext);
               };
 
-              const getResultSearchBox = (validatorData) => {
-                if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
+              const getResultSearchBox = async (validatorData) => {
+                if (!s(`.html-${searchBoxHistoryId}`)) return;
                 const { model, id } = validatorData;
+
                 switch (model) {
                   case 'search-box':
                     {
-                      if (
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList
-                      )
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                          `main-btn-menu-active`,
-                        );
                       currentKeyBoardSearchBoxIndex = 0;
-                      if (
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList
-                      )
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                          `main-btn-menu-active`,
-                        );
                       results = [];
-                      const routerInstance = Worker.RouterInstance.Routes();
-                      for (const _routerId of Object.keys(routerInstance)) {
-                        const routerId = _routerId.slice(1);
-                        if (routerId) {
-                          if (
-                            s(`.main-btn-${routerId}`) &&
-                            (routerId.toLowerCase().match(s(`.${id}`).value.toLowerCase()) ||
-                              (Translate.Data[routerId] &&
-                                Object.keys(Translate.Data[routerId]).filter((keyLang) =>
-                                  Translate.Data[routerId][keyLang]
-                                    .toLowerCase()
-                                    .match(s(`.${id}`).value.toLowerCase()),
-                                ).length > 0))
-                          ) {
-                            const fontAwesomeIcon = getAllChildNodes(s(`.main-btn-${routerId}`)).find((e) => {
-                              return (
-                                e.classList &&
-                                Array.from(e.classList).find((e) => e.match('fa-') && !e.match('fa-grip-vertical'))
-                              );
-                            });
-                            const imgElement = getAllChildNodes(s(`.main-btn-${routerId}`)).find((e) => {
-                              return (
-                                e.classList &&
-                                Array.from(e.classList).find((e) =>
-                                  options.searchCustomImgClass
-                                    ? e.match(options.searchCustomImgClass)
-                                    : e.match('img-btn-square-menu'),
-                                )
-                              );
-                            });
-                            if (imgElement || fontAwesomeIcon) {
-                              results.push({
-                                routerId,
-                                fontAwesomeIcon: fontAwesomeIcon,
-                                imgElement,
-                              });
-                            }
+
+                      const query = s(`.${id}`) ? s(`.${id}`).value : '';
+                      const trimmedQuery = query.trim();
+
+                      // Use SearchBox component for extensible search
+                      const searchContext = {
+                        RouterInstance: Worker.RouterInstance,
+                        options: options,
+                        minQueryLength: options?.minSearchQueryLength || 1, // Allow single character search by default
+                        onResultClick: () => {
+                          // Dismiss search box on result click
+                          if (s(`.${searchBoxHistoryId}`)) {
+                            Modal.removeModal(searchBoxHistoryId);
                           }
-                        }
+                        },
+                      };
+
+                      // Check minimum query length (default: 1 character)
+                      const minLength = searchContext.minQueryLength;
+                      if (trimmedQuery.length >= minLength) {
+                        results = await SearchBox.search(trimmedQuery, searchContext);
+                        renderSearchResult(results);
+                      } else if (trimmedQuery.length === 0) {
+                        // Show history when query is empty
+                        renderSearchResult(historySearchBox);
+                      } else {
+                        // Query is too short - show nothing or a hint
+                        renderSearchResult([]);
                       }
                     }
                     break;
@@ -718,8 +676,6 @@ const Modal = {
                   default:
                     break;
                 }
-                if (s(`.${inputSearchBoxId}`).value.trim()) renderSearchResult(results);
-                else renderSearchResult(historySearchBox);
               };
 
               const searchBoxCallBack = async (validatorData) => {
@@ -745,25 +701,19 @@ const Modal = {
               const getDefaultSearchBoxSelector = () => `.search-result-btn-${currentKeyBoardSearchBoxIndex}`;
 
               const updateSearchBoxValue = (selector) => {
-                if (!selector) selector = getDefaultSearchBoxSelector();
-                // check exist childNodes
-                if (!s(selector) || !s(selector).hasChildNodes()) return;
-
-                if (s(selector).childNodes) {
-                  if (
-                    s(selector).childNodes[s(selector).childNodes.length - 1] &&
-                    s(selector).childNodes[s(selector).childNodes.length - 1].data &&
-                    s(selector).childNodes[s(selector).childNodes.length - 1].data.trim()
-                  ) {
-                    s(`.${inputSearchBoxId}`).value =
-                      s(selector).childNodes[s(selector).childNodes.length - 1].data.trim();
-                  } else if (
-                    s(selector).childNodes[s(selector).childNodes.length - 2] &&
-                    s(selector).childNodes[s(selector).childNodes.length - 2].outerText &&
-                    s(selector).childNodes[s(selector).childNodes.length - 2].outerText.trim()
-                  ) {
-                    s(`.${inputSearchBoxId}`).value =
-                      s(selector).childNodes[s(selector).childNodes.length - 2].outerText.trim();
+                if (!selector) {
+                  // Get the currently active search result item
+                  const activeItem = s(`.html-${searchBoxHistoryId} .search-result-item.active-search-result`);
+                  if (activeItem) {
+                    const titleEl = activeItem.querySelector('.search-result-title');
+                    if (titleEl && titleEl.textContent) {
+                      s(`.${inputSearchBoxId}`).value = titleEl.textContent.trim();
+                    }
+                  }
+                } else if (s(selector)) {
+                  const titleEl = s(selector).querySelector('.search-result-title');
+                  if (titleEl && titleEl.textContent) {
+                    s(`.${inputSearchBoxId}`).value = titleEl.textContent.trim();
                   }
                 }
                 checkHistoryBoxTitleStatus();
@@ -771,17 +721,29 @@ const Modal = {
               };
 
               const setSearchValue = (selector) => {
-                if (!selector) selector = getDefaultSearchBoxSelector();
+                // Get all search result items
+                const allItems = sa(`.html-${searchBoxHistoryId} .search-result-item`);
+                if (!allItems || allItems.length === 0) return;
 
-                // check exist childNodes
-                if (!s(selector) || !s(selector).hasChildNodes()) return;
+                const activeItem = allItems[currentKeyBoardSearchBoxIndex];
+                if (!activeItem) return;
 
-                historySearchBox = historySearchBox.filter(
-                  (h) => h.routerId !== results[currentKeyBoardSearchBoxIndex].routerId,
-                );
-                historySearchBox.unshift(results[currentKeyBoardSearchBoxIndex]);
-                updateSearchBoxValue(selector);
-                s(`.main-btn-${results[currentKeyBoardSearchBoxIndex].routerId}`).click();
+                const resultId = activeItem.getAttribute('data-result-id');
+                const resultType = activeItem.getAttribute('data-result-type');
+
+                if (resultType === 'route' && results[currentKeyBoardSearchBoxIndex]) {
+                  historySearchBox = historySearchBox.filter(
+                    (h) => h.routerId !== results[currentKeyBoardSearchBoxIndex].routerId,
+                  );
+                  historySearchBox.unshift(results[currentKeyBoardSearchBoxIndex]);
+                  updateSearchBoxValue();
+                  if (s(`.main-btn-${resultId}`)) {
+                    s(`.main-btn-${resultId}`).click();
+                  }
+                } else {
+                  // Trigger click on custom result
+                  activeItem.click();
+                }
                 Modal.removeModal(searchBoxHistoryId);
               };
               let boxHistoryDelayRender = 0;
@@ -879,27 +841,29 @@ const Modal = {
                 keys: ['ArrowUp'],
                 eventCallBack: () => {
                   if (s(`.${id}`)) {
-                    if (
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex - 1]
-                    ) {
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                        `main-btn-menu-active`,
-                      );
+                    const allItems = sa(`.html-${searchBoxHistoryId} .search-result-item`);
+                    if (!allItems || allItems.length === 0) return;
+
+                    // Remove active class from current
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.remove('active-search-result');
+                    }
+
+                    // Navigate up
+                    if (currentKeyBoardSearchBoxIndex > 0) {
                       currentKeyBoardSearchBoxIndex--;
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                        `main-btn-menu-active`,
-                      );
                     } else {
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                          `main-btn-menu-active`,
-                        );
-                      currentKeyBoardSearchBoxIndex = s(`.html-${searchBoxHistoryId}`).childNodes.length - 1;
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                          `main-btn-menu-active`,
-                        );
+                      currentKeyBoardSearchBoxIndex = allItems.length - 1;
+                    }
+
+                    // Add active class to new and ensure visibility
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.add('active-search-result');
+                      // Use optimized scroll method to ensure item is always visible
+                      const container = s(`.html-${searchBoxHistoryId}`);
+                      if (container) {
+                        SearchBox.scrollIntoViewIfNeeded(allItems[currentKeyBoardSearchBoxIndex], container);
+                      }
                     }
                     updateSearchBoxValue();
                   }
@@ -912,27 +876,29 @@ const Modal = {
                 keys: ['ArrowDown'],
                 eventCallBack: () => {
                   if (s(`.${id}`)) {
-                    if (
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex + 1]
-                    ) {
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                        `main-btn-menu-active`,
-                      );
+                    const allItems = sa(`.html-${searchBoxHistoryId} .search-result-item`);
+                    if (!allItems || allItems.length === 0) return;
+
+                    // Remove active class from current
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.remove('active-search-result');
+                    }
+
+                    // Navigate down
+                    if (currentKeyBoardSearchBoxIndex < allItems.length - 1) {
                       currentKeyBoardSearchBoxIndex++;
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                        `main-btn-menu-active`,
-                      );
                     } else {
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                          `main-btn-menu-active`,
-                        );
                       currentKeyBoardSearchBoxIndex = 0;
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                          `main-btn-menu-active`,
-                        );
+                    }
+
+                    // Add active class to new and ensure visibility
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.add('active-search-result');
+                      // Use optimized scroll method to ensure item is always visible
+                      const container = s(`.html-${searchBoxHistoryId}`);
+                      if (container) {
+                        SearchBox.scrollIntoViewIfNeeded(allItems[currentKeyBoardSearchBoxIndex], container);
+                      }
                     }
                     updateSearchBoxValue();
                   }