collection runner tag updates

2025-08-18 12:01:03 +02:00 · 2025-07-15 14:33:18 +05:30
parent 3803576aa4
commit 0e28c97f8f
32 changed files with 920 additions and 342 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -32959,9 +32959,14 @@
        "axios": "^1.9.0"
      },
      "devDependencies": {
+        "@babel/preset-env": "^7.22.0",
+        "@babel/preset-typescript": "^7.22.0",
        "@rollup/plugin-commonjs": "^23.0.2",
        "@rollup/plugin-node-resolve": "^15.0.1",
        "@rollup/plugin-typescript": "^9.0.2",
+        "@types/jest": "^29.5.11",
+        "babel-jest": "^29.7.0",
+        "jest": "^29.2.0",
        "rollup": "3.29.5",
        "rollup-plugin-dts": "^5.0.0",
        "rollup-plugin-peer-deps-external": "^2.2.4",
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -188,16 +188,16 @@ export default class CodeEditor extends React.Component {
      editor.on('change', this._onEdit);
      this.addOverlay();

+      const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
+      
      // Setup AutoComplete Helper for all modes
      const autoCompleteOptions = {
-        showHintsFor: this.props.showHintsFor
+        showHintsFor: this.props.showHintsFor,
+        getAllVariables: getAllVariablesHandler
      };

-      const getVariables = () => getAllVariables(this.props.collection, this.props.item);
-
      this.brunoAutoCompleteCleanup = setupAutoComplete(
        editor,
-        getVariables,
        autoCompleteOptions
      );
    }
--- a/packages/bruno-app/src/components/MultiLineEditor/index.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/index.js
@@ -75,17 +75,19 @@ class MultiLineEditor extends Component {
      }
    });

+
+    const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
+    const getAnywordAutocompleteHints = () => this.props.autocomplete || [];
+    
    // Setup AutoComplete Helper
    const autoCompleteOptions = {
      showHintsFor: ['variables'],
-      anywordAutocompleteHints: this.props.autocomplete
+      getAllVariables: getAllVariablesHandler,
+      getAnywordAutocompleteHints
    };

-    const getVariables = () => getAllVariables(this.props.collection, this.props.item);
-
    this.brunoAutoCompleteCleanup = setupAutoComplete(
      this.editor,
-      getVariables,
      autoCompleteOptions
    );
    
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -19,7 +19,7 @@ import StyledWrapper from './StyledWrapper';
 import Documentation from 'components/Documentation/index';
 import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
-import Tags from 'components/RequestPane/Tags/index';
+import Settings from 'components/RequestPane/Settings';

 const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
  const dispatch = useDispatch();
@@ -102,8 +102,8 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
      case 'docs': {
        return <Documentation item={item} collection={collection} />;
      }
-      case 'tags': {
-        return <Tags item={item} collection={collection} />;
+      case 'settings': {
+        return <Settings item={item} collection={collection} />;
      }
      default: {
        return <div className="mt-4">404 | Not found</div>;
@@ -156,8 +156,8 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
          Docs
        </div>
-        <div className={getTabClassname('tags')} role="tab" onClick={() => selectTab('tags')}>
-          Tags
+        <div className={getTabClassname('settings')} role="tab" onClick={() => selectTab('settings')}>
+          Settings
        </div>
        <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
      </div>
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -18,7 +18,6 @@ import HeightBoundContainer from 'ui/HeightBoundContainer';
 import { useEffect } from 'react';
 import StatusDot from 'components/StatusDot';
 import Settings from 'components/RequestPane/Settings';
-import Tags from 'components/RequestPane/Tags/index';

 const HttpRequestPane = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -66,9 +65,6 @@ const HttpRequestPane = ({ item, collection }) => {
      case 'settings': {
        return <Settings item={item} collection={collection} />;
      }
-      case 'tags': {
-        return <Tags item={item} collection={collection} />;
-      }
      default: {
        return <div className="mt-4">404 | Not found</div>;
      }
@@ -105,6 +101,7 @@ const HttpRequestPane = ({ item, collection }) => {
  const requestVars = getPropertyFromDraftOrRequest('request.vars.req');
  const responseVars = getPropertyFromDraftOrRequest('request.vars.res');
  const auth = getPropertyFromDraftOrRequest('request.auth');
+  const tags = getPropertyFromDraftOrRequest('tags');

  const activeParamsLength = params.filter((param) => param.enabled).length;
  const activeHeadersLength = headers.filter((header) => header.enabled).length;
@@ -168,9 +165,7 @@ const HttpRequestPane = ({ item, collection }) => {
        </div>
        <div className={getTabClassname('settings')} role="tab" onClick={() => selectTab('settings')}>
          Settings
-        </div>
-        <div className={getTabClassname('tags')} role="tab" onClick={() => selectTab('tags')}>
-          Tags
+          {tags && tags.length > 0 && <StatusDot />}
        </div>
        {focusedTab.requestPaneTab === 'body' ? (
          <div className="flex flex-grow justify-end items-center">
--- a/packages/bruno-app/src/components/RequestPane/Settings/Tags/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Settings/Tags/index.js
@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect } from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import { addRequestTag, deleteRequestTag, updateCollectionTagsList } from 'providers/ReduxStore/slices/collections';
+import TagList from 'components/TagList/index';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+
+const Tags = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  // all tags in the collection
+  const collectionTags = collection.allTags || [];
+
+  // tags for the current request
+  const tags = item.draft ? get(item, 'draft.tags', []) : get(item, 'tags', []);
+
+  // Filter out tags that are already associated with the current request
+  const collectionTagsWithoutCurrentRequestTags = collectionTags?.filter(tag => !tags.includes(tag)) || [];
+
+  const handleAdd = useCallback((tag) => {
+    const trimmedTag = tag.trim();
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      dispatch(
+        addRequestTag({
+          tag: trimmedTag,
+          itemUid: item.uid,
+          collectionUid: collection.uid
+        })
+      );
+    }
+  }, [dispatch, tags, item.uid, collection.uid]);
+
+  const handleRemove = useCallback((tag) => {
+    dispatch(
+      deleteRequestTag({
+        tag,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  }, [dispatch, item.uid, collection.uid]);
+
+  const handleRequestSave = () => {
+    dispatch(saveRequest(item.uid, collection.uid));
+  }
+
+  useEffect(() => {
+    dispatch(updateCollectionTagsList({ collectionUid: collection.uid }));
+  }, [collection.uid, dispatch]);
+
+  return (
+    <div className="flex flex-col">
+      <TagList 
+        tagsHintList={collectionTagsWithoutCurrentRequestTags}
+        handleAddTag={handleAdd} 
+        handleRemoveTag={handleRemove}
+        tags={tags}
+        onSave={handleRequestSave}
+      />
+    </div>
+  );
+};
+
+export default Tags; 
--- a/packages/bruno-app/src/components/RequestPane/Settings/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Settings/index.js
@@ -1,8 +1,10 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import get from 'lodash/get';
+import { IconTag } from '@tabler/icons';
 import ToggleSelector from 'components/RequestPane/Settings/ToggleSelector';
 import { updateItemSettings } from 'providers/ReduxStore/slices/collections';
+import Tags from './Tags/index';

 const Settings = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -22,7 +24,16 @@ const Settings = ({ item, collection }) => {
  }, [encodeUrl, dispatch, collection.uid, item.uid]);

  return (
-    <div className="h-full flex flex-col gap-2">
+    <div className="w-full h-full flex flex-col gap-10">
+      <div className='flex flex-col gap-2 max-w-[400px]'>
+        <h3 className="text-xs font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1">
+          <IconTag size={16} />
+          Tags
+        </h3>
+        <div label="Tags">
+          <Tags item={item} collection={collection} />
+        </div>
+      </div>
      <div className='flex flex-col gap-4'>
        <ToggleSelector
          checked={encodeUrl}
--- a/packages/bruno-app/src/components/RequestPane/Tags/TagList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Tags/TagList/StyledWrapper.js
@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  input[type='text'] {
-    border: solid 1px transparent;
-    outline: none !important;
-    background-color: inherit;
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-    border: 1px solid ${(props) => props.theme.text};
-    border-radius: 5px;
-    padding-inline: 5px;
-    background: ${(props) => props.theme.sidebar.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Tags/TagList/TagList.js
+++ b/packages/bruno-app/src/components/RequestPane/Tags/TagList/TagList.js
@@ -1,69 +0,0 @@
-import { IconX } from '@tabler/icons';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import StyledWrapper from './StyledWrapper';
-
-const TagList = ({ tags, onTagRemove, onTagAdd }) => {
-  const tagNameRegex = /^[\w-]+$/;
-  const [isEditing, setIsEditing] = useState(false);
-  const [text, setText] = useState('');
-
-  const handleChange = (e) => {
-    setText(e.target.value);
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.code == 'Escape') {
-      setText('');
-      setIsEditing(false);
-      return;
-    }
-    if (e.code !== 'Enter' && e.code !== 'Space') {
-      return;
-    }
-    if (!tagNameRegex.test(text)) {
-      toast.error('Tags must only contain alpha-numeric characters, "-", "_"');
-      return;
-    }
-    if (tags.includes(text)) {
-      toast.error(`Tag "${text}" already exists`);
-      return;
-    }
-    onTagAdd(text);
-    setText('');
-    setIsEditing(false);
-  };
-
-  return (
-    <StyledWrapper className="flex flex-wrap gap-2 mt-1">
-      <ul className="flex flex-wrap gap-1">
-        {tags && tags.length
-          ? tags.map((_tag) => (
-              <li key={_tag}>
-                <span>{_tag}</span>
-                <button tabIndex={-1} onClick={() => onTagRemove(_tag)}>
-                  <IconX strokeWidth={1.5} size={20} />
-                </button>
-              </li>
-            ))
-          : null}
-      </ul>
-      {isEditing ? (
-        <input
-          type="text"
-          placeholder="Space or Enter to add tag"
-          value={text}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          autoFocus
-        />
-      ) : (
-        <button className="text-link select-none" onClick={() => setIsEditing(true)}>
-          + Add
-        </button>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default TagList;
--- a/packages/bruno-app/src/components/RequestPane/Tags/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Tags/index.js
@@ -1,43 +0,0 @@
-import 'github-markdown-css/github-markdown.css';
-import get from 'lodash/get';
-import { addRequestTag, deleteRequestTag } from 'providers/ReduxStore/slices/collections';
-import { useDispatch } from 'react-redux';
-import TagList from './TagList/TagList';
-
-const Tags = ({ item, collection }) => {
-  const tags = item.draft ? get(item, 'draft.request.tags') : get(item, 'request.tags');
-
-  const dispatch = useDispatch();
-
-  const handleAdd = (_tag) => {
-    dispatch(
-      addRequestTag({
-        tag: _tag,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemove = (_tag) => {
-    dispatch(
-      deleteRequestTag({
-        tag: _tag,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  if (!item) {
-    return null;
-  }
-
-  return (
-    <div>
-      <TagList tags={tags} onTagRemove={handleRemove} onTagAdd={handleAdd} />
-    </div>
-  );
-};
-
-export default Tags;
--- a/packages/bruno-app/src/components/RunnerResults/RunnerTags/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunnerTags/index.jsx
@@ -0,0 +1,128 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { get, cloneDeep, find } from 'lodash';
+import { updateCollectionTagsList, updateRunnerTagsDetails } from 'providers/ReduxStore/slices/collections';
+import TagList from 'components/TagList';
+
+const RunnerTags = ({ collectionUid }) => {
+  const dispatch = useDispatch();
+  const collections = useSelector((state) => state.collections.collections);
+  const collection = cloneDeep(find(collections, (c) => c.uid === collectionUid));
+  
+  // tags for the collection run
+  const tags = get(collection, 'runnerTags', { include: [], exclude: [] });
+
+  // have tags been enabled for the collection run
+  const tagsEnabled = get(collection, 'runnerTagsEnabled', false);
+
+  // all available tags in the collection that can be used for filtering
+  const availableTags = get(collection, 'allTags', []);
+  const tagsHintList = availableTags.filter(t => !tags.exclude.includes(t) && !tags.include.includes(t));
+
+  useEffect(() => {
+    dispatch(updateCollectionTagsList({ collectionUid }));
+  }, [collection.uid, dispatch]);
+
+  const handleValidation = (tag) => {
+    const trimmedTag = tag.trim();
+    if (!availableTags.includes(trimmedTag)) {
+      return 'tag does not exist!';
+    }
+    if (tags.include.includes(trimmedTag)) {
+      return 'tag already present in the include list!';
+    }
+    if (tags.exclude.includes(trimmedTag)) {
+      return 'tag is present in the exclude list!';
+    }
+  }
+
+  const handleAddTag = ({ tag, to }) => {
+    const trimmedTag = tag.trim();
+    if (!trimmedTag) return;
+    // add tag to the `include` list
+    if (to === 'include') {
+      if (tags.include.includes(trimmedTag) || tags.exclude.includes(trimmedTag)) return;
+      if (!availableTags.includes(trimmedTag)) {
+        return;
+      }
+      const newTags = { ...tags, include: [...tags.include, trimmedTag].sort() };
+      setTags(newTags);
+      return;
+    }
+    // add tag to the `exclude` list
+    if (to === 'exclude') {
+      if (tags.include.includes(trimmedTag) || tags.exclude.includes(trimmedTag)) return;
+      if (!availableTags.includes(trimmedTag)) {
+        return;
+      }
+      const newTags = { ...tags, exclude: [...tags.exclude, trimmedTag].sort() };
+      setTags(newTags);
+    }
+  };
+
+  const handleRemoveTag = ({ tag, from }) => {
+    const trimmedTag = tag.trim();
+    if (!trimmedTag) return;
+    // remove tag from the `include` list
+    if (from === 'include') {
+      if (!tags.include.includes(trimmedTag)) return;
+      const newTags = { ...tags, include: tags.include.filter((t) => t !== trimmedTag) };
+      setTags(newTags);
+      return;
+    }
+    // remove tag from the `exclude` list
+    if (from === 'exclude') {
+      if (!tags.exclude.includes(trimmedTag)) return;
+      const newTags = { ...tags, exclude: tags.exclude.filter((t) => t !== trimmedTag) };
+      setTags(newTags);
+    }
+  };
+
+  const setTags = (tags) => {
+    dispatch(updateRunnerTagsDetails({ collectionUid: collection.uid, tags }));
+  };
+
+  const setTagsEnabled = (tagsEnabled) => {
+    dispatch(updateRunnerTagsDetails({ collectionUid: collection.uid, tagsEnabled }));
+  };
+
+  return (
+    <div className="mt-6 flex flex-col">
+      <div className="flex gap-2">
+        <label className="block font-medium">Filter requests with tags</label>
+        <input
+          className="cursor-pointer"
+          type="checkbox"
+          checked={tagsEnabled}
+          onChange={() => setTagsEnabled(!tagsEnabled)}
+        />
+      </div>
+      {tagsEnabled && (
+        <div className="flex flex-row mt-4 gap-4 w-full">
+          <div className="w-1/2 flex flex-col gap-2 max-w-[400px]">
+            <span>Included tags:</span>
+            <TagList
+              tags={tags.include}
+              handleAddTag={tag => handleAddTag({ tag, to: 'include' })}
+              handleRemoveTag={tag => handleRemoveTag({ tag, from: 'include' })}
+              tagsHintList={tagsHintList}
+              handleValidation={handleValidation}
+            />
+          </div>
+          <div className="w-1/2 flex flex-col gap-2 max-w-[400px]">
+            <span>Excluded tags:</span>
+            <TagList
+              tags={tags.exclude}
+              handleAddTag={tag => handleAddTag({ tag, to: 'exclude' })}
+              handleRemoveTag={tag => handleRemoveTag({ tag, from: 'exclude' })}
+              tagsHintList={tagsHintList}
+              handleValidation={handleValidation}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default RunnerTags;
--- a/packages/bruno-app/src/components/RunnerResults/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/index.jsx
@@ -9,7 +9,7 @@ import { IconRefresh, IconCircleCheck, IconCircleX, IconCircleOff, IconCheck, Ic
 import ResponsePane from './ResponsePane';
 import StyledWrapper from './StyledWrapper';
 import { areItemsLoading } from 'utils/collections';
-import TagList from 'components/RequestPane/Tags/TagList/TagList';
+import RunnerTags from './RunnerTags/index';

 const getDisplayName = (fullPath, pathname, name = '') => {
  let relativePath = path.relative(fullPath, pathname);
@@ -43,8 +43,6 @@ export default function RunnerResults({ collection }) {
  const dispatch = useDispatch();
  const [selectedItem, setSelectedItem] = useState(null);
  const [delay, setDelay] = useState(null);
-  const [tags, setTags] = useState({ include: [], exclude: [] });
-  const [tagsEnabled, setTagsEnabled] = useState(false);

  // ref for the runner output body
  const runnerBodyRef = useRef();
@@ -66,6 +64,15 @@ export default function RunnerResults({ collection }) {
  const collectionCopy = cloneDeep(collection);
  const runnerInfo = get(collection, 'runnerResult.info', {});

+  // tags for the collection run
+  const tags = get(collection, 'runnerTags', { include: [], exclude: [] });
+
+  // have tags been enabled for the collection run
+  const tagsEnabled = get(collection, 'runnerTagsEnabled', false);
+
+  // have tags been added for the collection run
+  const areTagsAdded = tags.include.length > 0 || tags.exclude.length > 0;
+
  const items = cloneDeep(get(collection, 'runnerResult.items', []))
    .map((item) => {
      const info = findItemInCollection(collectionCopy, item.uid);
@@ -78,7 +85,8 @@ export default function RunnerResults({ collection }) {
        type: info.type,
        filename: info.filename,
        pathname: info.pathname,
-        displayName: getDisplayName(collection.pathname, info.pathname, info.name)
+        displayName: getDisplayName(collection.pathname, info.pathname, info.name),
+        tags: [...(info.request?.tags || [])].sort(),
      };
      if (newItem.status !== 'error' && newItem.status !== 'skipped') {
        newItem.testStatus = getTestStatus(newItem.testResults);
@@ -151,37 +159,9 @@ export default function RunnerResults({ collection }) {
            onChange={(e) => setDelay(e.target.value)}
          />
        </div>
-        <div className="mt-6 flex flex-col">
-          <div className="flex gap-2">
-            <label className="block font-medium">Filter requests with tags</label>
-            <input
-              className="cursor-pointer"
-              type="checkbox"
-              checked={tagsEnabled}
-              onChange={() => setTagsEnabled(!tagsEnabled)}
-            />
-          </div>
-          {tagsEnabled && (
-            <div className="flex p-4 gap-4 max-w-xl justify-between">
-              <div className="w-1/2">
-                <span>Included tags:</span>
-                <TagList
-                  tags={tags.include}
-                  onTagAdd={(tag) => setTags({ ...tags, include: [...tags.include, tag] })}
-                  onTagRemove={(tag) => setTags({ ...tags, include: tags.include.filter((t) => t !== tag) })}
-                />
-              </div>
-              <div className="w-1/2">
-                <span>Excluded tags:</span>
-                <TagList
-                  tags={tags.exclude}
-                  onTagAdd={(tag) => setTags({ ...tags, exclude: [...tags.exclude, tag] })}
-                  onTagRemove={(tag) => setTags({ ...tags, exclude: tags.exclude.filter((t) => t !== tag) })}
-                />
-              </div>
-            </div>
-          )}
-        </div>
+
+        {/* Tags for the collection run */}
+        <RunnerTags collectionUid={collection.uid} />

        <button type="submit" className="submit btn btn-sm btn-secondary mt-6" onClick={runCollection}>
          Run Collection
@@ -216,11 +196,25 @@ export default function RunnerResults({ collection }) {
            Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}, Skipped:{' '}
            {skippedRequests.length}
          </div>
+          {tagsEnabled && areTagsAdded && (
+            <div className="pb-2 text-xs flex flex-row gap-1">
+              Tags:
+              <div className='flex flex-row items-center gap-x-2'>
+                <div className="text-green-500">
+                  {tags.include.join(', ')}
+                </div>
+                <div className="text-gray-500">
+                  {tags.exclude.join(', ')}
+                </div>
+              </div>
+            </div>
+          )}
          {runnerInfo?.statusText ? 
            <div className="pb-2 font-medium danger">
              {runnerInfo?.statusText}
            </div>
          : null}
+          
          {items.map((item) => {
            return (
              <div key={item.uid}>
@@ -256,6 +250,11 @@ export default function RunnerResults({ collection }) {
                      </span>
                    )}
                  </div>
+                  {tagsEnabled && areTagsAdded && item?.tags?.length > 0 && (
+                    <div className="pl-7 text-xs text-gray-500">
+                      Tags: {item.tags.filter(t => tags.include.includes(t)).join(', ')}
+                    </div>
+                  )}
                  {item.status == 'error' ? <div className="error-message pl-8 pt-2 text-xs">{item.error}</div> : null}

                  <ul className="pl-8">
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { uuid } from 'utils/common';
 import Modal from 'components/Modal';
@@ -8,15 +8,19 @@ import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/act
 import { flattenItems } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { areItemsLoading } from 'utils/collections';
-import TagList from 'components/RequestPane/Tags/TagList/TagList';
+import RunnerTags from 'components/RunnerResults/RunnerTags/index';

 const RunCollectionItem = ({ collectionUid, item, onClose }) => {
  const dispatch = useDispatch();

  const collection = useSelector(state => state.collections.collections?.find(c => c.uid === collectionUid));
  const isCollectionRunInProgress = collection?.runnerResult?.info?.status && (collection?.runnerResult?.info?.status !== 'ended');
-  const [tags, setTags] = useState({ include: [], exclude: [] });
-  const [tagsEnabled, setTagsEnabled] = useState(false);
+
+  // tags for the collection run
+  const tags = get(collection, 'runnerTags', { include: [], exclude: [] });
+
+  // have tags been enabled for the collection run
+  const tagsEnabled = get(collection, 'runnerTagsEnabled', false);

  const onSubmit = (recursive) => {
    dispatch(
@@ -75,37 +79,8 @@ const RunCollectionItem = ({ collectionUid, item, onClose }) => {
            {isFolderLoading ? <div className='mb-8 warning'>Requests in this folder are still loading.</div> : null}
            {isCollectionRunInProgress ? <div className='mb-6 warning'>A Collection Run is already in progress.</div> : null}

-            <div className="mb-8 flex flex-col">
-              <div className="flex gap-2">
-                <label className="block font-medium">Filter requests with tags</label>
-                <input
-                  className="cursor-pointer"
-                  type="checkbox"
-                  checked={tagsEnabled}
-                  onChange={() => setTagsEnabled(!tagsEnabled)}
-                />
-              </div>
-              {tagsEnabled && (
-                <div className="flex p-4 gap-4 max-w-xl justify-between">
-                  <div className="w-1/2">
-                    <span>Included tags:</span>
-                    <TagList
-                      tags={tags.include}
-                      onTagAdd={(tag) => setTags({ ...tags, include: [...tags.include, tag] })}
-                      onTagRemove={(tag) => setTags({ ...tags, include: tags.include.filter((t) => t !== tag) })}
-                    />
-                  </div>
-                  <div className="w-1/2">
-                    <span>Excluded tags:</span>
-                    <TagList
-                      tags={tags.exclude}
-                      onTagAdd={(tag) => setTags({ ...tags, exclude: [...tags.exclude, tag] })}
-                      onTagRemove={(tag) => setTags({ ...tags, exclude: tags.exclude.filter((t) => t !== tag) })}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
+            {/* Tags for the collection run */}
+            <RunnerTags collectionUid={collection.uid} />

            <div className="flex justify-end bruno-modal-footer">
              <span className="mr-3">
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -74,17 +74,19 @@ class SingleLineEditor extends Component {
      }
    });

+    const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
+    const getAnywordAutocompleteHints = () => this.props.autocomplete || [];
+
    // Setup AutoComplete Helper
    const autoCompleteOptions = {
-      showHintsFor: ['variables'],
-      anywordAutocompleteHints: this.props.autocomplete
+      getAllVariables: getAllVariablesHandler,
+      getAnywordAutocompleteHints,
+      showHintsFor: this.props.showHintsFor || ['variables'],
+      showHintsOnClick: this.props.showHintsOnClick
    };

-    const getVariables = () => getAllVariables(this.props.collection, this.props.item);
-
    this.brunoAutoCompleteCleanup = setupAutoComplete(
      this.editor,
-      getVariables,
      autoCompleteOptions
    );
    
@@ -189,7 +191,7 @@ class SingleLineEditor extends Component {

  render() {
    return (
-      <div className="flex flex-row justify-between w-full overflow-x-auto">
+      <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
        <StyledWrapper ref={this.editorRef} className="single-line-editor grow" />
        {this.secretEye(this.props.isSecret)}
      </div>
--- a/packages/bruno-app/src/components/TagList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/TagList/StyledWrapper.js
@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 40px;
+    padding: 8px 0;
+  }
+
+  .tag-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 7px;
+    background-color: ${(props) => props.theme.sidebar.bg};
+    border: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
+    border-radius: 3px;
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.text};
+    max-width: 200px;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:hover {
+      background-color: ${(props) => props.theme.requestTabs.active.bg};
+      border-color: ${(props) => props.theme.requestTabs.active.border || props.theme.requestTabs.bottomBorder};
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      transform: translateY(-1px);
+    }
+  }
+
+  .tag-icon {
+    color: ${(props) => props.theme.textSecondary || props.theme.text};
+    opacity: 0.7;
+    flex-shrink: 0;
+  }
+
+  .tag-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .tag-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    border-radius: 3px;
+    color: ${(props) => props.theme.textSecondary || props.theme.text};
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    opacity: 0.7;
+
+    &:hover {
+      background-color: ${(props) => props.theme.danger};
+      color: white;
+      opacity: 1;
+      transform: scale(1.1);
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${(props) => props.theme.danger};
+      outline-offset: 1px;
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 16px;
+    background-color: ${(props) => props.theme.sidebar.bg};
+    border: 2px dashed ${(props) => props.theme.requestTabs.bottomBorder};
+    border-radius: 3px;
+    color: ${(props) => props.theme.textSecondary || props.theme.text};
+    text-align: left;
+  }
+
+  .empty-icon {
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+
+  .empty-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .empty-title {
+    font-weight: 600;
+    margin: 0 0 4px 0;
+    font-size: 14px;
+    color: ${(props) => props.theme.text};
+  }
+
+  .empty-subtitle {
+    margin: 0;
+    font-size: 12px;
+    opacity: 0.8;
+    line-height: 1.5;
+    color: ${(props) => props.theme.textSecondary || props.theme.text};
+  }
+
+  /* Responsive design */
+  @media (max-width: 480px) {
+    .tags-container {
+      gap: 6px;
+    }
+    
+    .tag-item {
+      padding: 4px 8px;
+      font-size: 11px;
+    }
+    
+    .empty-state {
+      padding: 16px 12px;
+      flex-direction: column;
+      text-align: center;
+    }
+  }
+`;
+
+export default StyledWrapper; 
--- a/packages/bruno-app/src/components/TagList/index.js
+++ b/packages/bruno-app/src/components/TagList/index.js
@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { IconX, IconTag } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import { useTheme } from 'providers/Theme/index';
+
+const TagList = ({ tagsHintList = [], handleAddTag, tags, handleRemoveTag, onSave, handleValidation }) => {
+  const { displayedTheme } = useTheme();
+  const tagNameRegex = /^[\w-]+$/;
+  const [text, setText] = useState('');
+  const [error, setError] = useState('');
+
+  const handleInputChange = (value) => {
+    setError('');
+    setText(value);
+  };
+
+  const handleKeyDown = (e) => {
+    if (!tagNameRegex.test(text)) {
+      setError('Tags must only contain alpha-numeric characters, "-", "_"');
+      return;
+    }
+    if (tags.includes(text)) {
+      setError(`Tag "${text}" already exists`);
+      return;
+    }
+    if (handleValidation) {
+      const error = handleValidation(text);
+      if (error) {
+        setError(error);
+        setText('');
+        return;
+      }
+    }
+    handleAddTag(text);
+    setText('');
+  };
+
+  return (
+    <StyledWrapper className="flex flex-wrap flex-col gap-2">
+      <SingleLineEditor
+        className="border border-gray-500/50 px-2"
+        value={text}
+        placeholder="Enter tag name (e.g., smoke, regression etc)"
+        autocomplete={tagsHintList}
+        showHintsOnClick={true}
+        showHintsFor={[]}
+        theme={displayedTheme}
+        onChange={handleInputChange}
+        onRun={handleKeyDown}
+        onSave={onSave}
+      />
+      {error && <span className='text-xs text-red-500'>{error}</span>}
+      <ul className="flex flex-wrap gap-1">
+        {tags && tags.length
+          ? tags.map((_tag) => (
+              <li key={_tag}>
+                <button
+                  className="tag-item"
+                  onClick={() => handleRemoveTag(_tag)}
+                  type="button"
+                >
+                  <IconTag size={12} className="tag-icon" aria-hidden="true" />
+                  <span className="tag-text" title={_tag}>
+                    {_tag}
+                  </span>
+                  <IconX size={12} strokeWidth={2} aria-hidden="true" />
+                </button>
+              </li>
+            ))
+          : null}
+      </ul>
+    </StyledWrapper>
+  );
+};
+
+export default TagList;
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -20,6 +20,7 @@ import { getSubdirectoriesFromRoot } from 'utils/common/platform';
 import toast from 'react-hot-toast';
 import mime from 'mime-types';
 import path from 'utils/common/path';
+import { getUniqueTagsFromItems } from 'utils/collections/index';

 const initialState = {
  collections: [],
@@ -36,6 +37,7 @@ export const collectionsSlice = createSlice({

      collection.settingsSelectedTab = 'overview';
      collection.folderLevelSettingsSelectedTab = {};
+      collection.allTags = []; // Initialize collection-level tags

      // Collection mount status is used to track the mount status of the collection
      // values can be 'unmounted', 'mounting', 'mounted'
@@ -1860,6 +1862,7 @@ export const collectionsSlice = createSlice({
            currentItem.name = file.data.name;
            currentItem.type = file.data.type;
            currentItem.seq = file.data.seq;
+            currentItem.tags = file.data.tags;
            currentItem.request = file.data.request;
            currentItem.filename = file.meta.name;
            currentItem.pathname = file.meta.pathname;
@@ -1875,6 +1878,7 @@ export const collectionsSlice = createSlice({
              name: file.data.name,
              type: file.data.type,
              seq: file.data.seq,
+              tags: file.data.tags,
              request: file.data.request,
              settings: file.data.settings,
              filename: file.meta.name,
@@ -1965,6 +1969,7 @@ export const collectionsSlice = createSlice({
            item.name = file.data.name;
            item.type = file.data.type;
            item.seq = file.data.seq;
+            item.tags = file.data.tags;
            item.request = file.data.request;
            item.settings = file.data.settings;
            item.filename = file.meta.name;
@@ -2224,6 +2229,20 @@ export const collectionsSlice = createSlice({

      if (collection) {
        collection.runnerResult = null;
+        collection.runnerTags = { include: [], exclude: [] }
+        collection.runnerTagsEnabled = false;
+      }
+    },
+    updateRunnerTagsDetails: (state, action) => {
+      const { collectionUid, tags, tagsEnabled } = action.payload;
+      const collection = findCollectionByUid(state.collections, collectionUid);
+      if (collection) {
+        if (tags) {
+          collection.runnerTags = tags;
+        }
+        if (typeof tagsEnabled === 'boolean') {
+          collection.runnerTagsEnabled = tagsEnabled;
+        }
      }
    },
    updateRequestDocs: (state, action) => {
@@ -2352,10 +2371,12 @@ export const collectionsSlice = createSlice({
          if (!item.draft) {
            item.draft = cloneDeep(item);
          }
-          item.draft.request.tags = item.draft.request.tags || [];
-          if (!item.draft.request.tags.includes(tag.trim())) {
-            item.draft.request.tags.push(tag.trim());
+          item.draft.tags = item.draft.tags || [];
+          if (!item.draft.tags.includes(tag.trim())) {
+            item.draft.tags.push(tag.trim());
          }
+
+          collection.allTags = getUniqueTagsFromItems(collection.items);
        }
      }
    },
@@ -2370,10 +2391,20 @@ export const collectionsSlice = createSlice({
          if (!item.draft) {
            item.draft = cloneDeep(item);
          }
-          item.draft.request.tags = item.draft.request.tags || [];
-          item.draft.request.tags = item.draft.request.tags.filter((t) => t !== tag.trim());
+          item.draft.tags = item.draft.tags || [];
+          item.draft.tags = item.draft.tags.filter((t) => t !== tag.trim());
+
+          collection.allTags = getUniqueTagsFromItems(collection.items);
        }
      }
+    },
+    updateCollectionTagsList: (state, action) => {
+      const { collectionUid } = action.payload;
+      const collection = findCollectionByUid(state.collections, collectionUid);
+      
+      if (collection) {
+        collection.allTags = getUniqueTagsFromItems(collection.items);
+      }
    }
  }
 });
@@ -2483,6 +2514,7 @@ export const {
  runRequestEvent,
  runFolderEvent,
  resetCollectionRunner,
+  updateRunnerTagsDetails,
  updateRequestDocs,
  updateFolderDocs,
  moveCollection,
@@ -2492,7 +2524,8 @@ export const {
  updateFolderAuth,
  updateFolderAuthMode,
  addRequestTag,
-  deleteRequestTag
+  deleteRequestTag,
+  updateCollectionTagsList
 } = collectionsSlice.actions;

 export default collectionsSlice.reducer;
--- a/packages/bruno-app/src/utils/codemirror/autocomplete.js
+++ b/packages/bruno-app/src/utils/codemirror/autocomplete.js
@@ -178,11 +178,11 @@ const addVariableHintsToSet = (variableHints, allVariables) => {
 /**
 * Add custom hints to categorized hints
 * @param {Set} anywordHints - Set to add custom hints to
- * @param {Object} options - Options containing custom hints
+ * @param {string[]} customHints - Array of custom hints
 */
-const addCustomHintsToSet = (anywordHints, options) => {
-  if (options.anywordAutocompleteHints && Array.isArray(options.anywordAutocompleteHints)) {
-    options.anywordAutocompleteHints.forEach(hint => {
+const addCustomHintsToSet = (anywordHints, customHints) => {
+  if (customHints && Array.isArray(customHints)) {
+    customHints.forEach(hint => {
      generateProgressiveHints(hint).forEach(h => anywordHints.add(h));
    });
  }
@@ -191,10 +191,11 @@ const addCustomHintsToSet = (anywordHints, options) => {
 /**
 * Build categorized hints list from all sources
 * @param {Object} allVariables - All available variables
+ * @param {string[]} anywordAutocompleteHints - Custom autocomplete hints
 * @param {Object} options - Configuration options
 * @returns {Object} Categorized hints object
 */
-const buildCategorizedHintsList = (allVariables = {}, options = {}) => {
+const buildCategorizedHintsList = (allVariables = {}, anywordAutocompleteHints = [], options = {}) => {
  const categorizedHints = {
    api: new Set(),
    variables: new Set(),
@@ -206,7 +207,7 @@ const buildCategorizedHintsList = (allVariables = {}, options = {}) => {
  // Add different types of hints
  addApiHintsToSet(categorizedHints.api, showHintsFor);
  addVariableHintsToSet(categorizedHints.variables, allVariables);
-  addCustomHintsToSet(categorizedHints.anyword, options);
+  addCustomHintsToSet(categorizedHints.anyword, anywordAutocompleteHints);
  
  return {
    api: Array.from(categorizedHints.api).sort(),
@@ -499,10 +500,11 @@ const createStandardHintList = (filteredHints, from, to) => {
 * Bruno AutoComplete Helper - Main function with context awareness
 * @param {Object} cm - CodeMirror instance
 * @param {Object} allVariables - All available variables
+ * @param {string[]} anywordAutocompleteHints - Custom autocomplete hints
 * @param {Object} options - Configuration options
 * @returns {Object|null} Hint object or null
 */
-export const getAutoCompleteHints = (cm, allVariables = {}, options = {}) => {
+export const getAutoCompleteHints = (cm, allVariables = {}, anywordAutocompleteHints = [], options = {}) => {
  if (!allVariables) {
    return null;
  }
@@ -520,7 +522,7 @@ export const getAutoCompleteHints = (cm, allVariables = {}, options = {}) => {
    return null;
  }
  
-  const categorizedHints = buildCategorizedHintsList(allVariables, options);
+  const categorizedHints = buildCategorizedHintsList(allVariables, anywordAutocompleteHints, options);
  const filteredHints = filterHintsByContext(categorizedHints, word, context, showHintsFor);
  
  if (filteredHints.length === 0) {
@@ -534,21 +536,75 @@ export const getAutoCompleteHints = (cm, allVariables = {}, options = {}) => {
  return createStandardHintList(filteredHints, from, to);
 };

+/**
+ * Handle click events for autocomplete
+ * @param {Object} cm - CodeMirror instance
+ * @param {Object} options - Configuration options
+ */
+const handleClickForAutocomplete = (cm, options) => {
+  const allVariables = options.getAllVariables?.() || {};
+  const anywordAutocompleteHints = options.getAnywordAutocompleteHints?.() || [];
+  const showHintsFor = options.showHintsFor || [];
+  
+  // Build all available hints
+  const categorizedHints = buildCategorizedHintsList(allVariables, anywordAutocompleteHints, options);
+  
+  // Combine all hints based on showHintsFor configuration
+  let allHints = [];
+  
+  // Add API hints if enabled
+  const hasApiHints = showHintsFor.some(hint => ['req', 'res', 'bru'].includes(hint));
+  if (hasApiHints) {
+    allHints = [...allHints, ...categorizedHints.api];
+  }
+  
+  // Add variable hints if enabled
+  if (showHintsFor.includes('variables')) {
+    allHints = [...allHints, ...categorizedHints.variables];
+  }
+  
+  // Add anyword hints (always included)
+  allHints = [...allHints, ...categorizedHints.anyword];
+  
+  // Remove duplicates and sort
+  allHints = [...new Set(allHints)].sort();
+  
+  if (allHints.length === 0) {
+    return;
+  }
+  
+  const cursor = cm.getCursor();
+
+  if (cursor.ch > 0) return;
+
+  // Defer showHint to ensure editor is focused
+  setTimeout(() => {
+    cm.showHint({
+      hint: () => ({
+        list: allHints,
+        from: cursor,
+        to: cursor
+      }),
+      completeSingle: false
+    });
+  }, 0);
+};
+
 /**
 * Handle keyup events for autocomplete
 * @param {Object} cm - CodeMirror instance
 * @param {Event} event - The keyup event
- * @param {Function} getAllVariablesFunc - Function to get all variables
 * @param {Object} options - Configuration options
 */
-const handleKeyupForAutocomplete = (cm, event, getAllVariablesFunc, options) => {
+const handleKeyupForAutocomplete = (cm, event, options) => {
  // Skip non-character keys
  if (!NON_CHARACTER_KEYS.test(event?.key)) {
    return;
  }
  
-  const allVariables = getAllVariablesFunc();
-  const hints = getAutoCompleteHints(cm, allVariables, options);
+  const allVariables = options.getAllVariables?.() || {};
+  const anywordAutocompleteHints = options.getAnywordAutocompleteHints?.() || [];
+  const hints = getAutoCompleteHints(cm, allVariables, anywordAutocompleteHints, options);
  
  if (!hints) {
    if (cm.state.completionActive) {
@@ -566,23 +622,37 @@ const handleKeyupForAutocomplete = (cm, event, getAllVariablesFunc, options) =>
 /**
 * Setup Bruno AutoComplete Helper on a CodeMirror editor
 * @param {Object} editor - CodeMirror editor instance
- * @param {Function} getAllVariablesFunc - Function to get all variables
 * @param {Object} options - Configuration options
 * @returns {Function} Cleanup function
 */
-export const setupAutoComplete = (editor, getAllVariablesFunc, options = {}) => {
+export const setupAutoComplete = (editor, options = {}) => {
  if (!editor) {
    return;
  }
  
  const keyupHandler = (cm, event) => {
-    handleKeyupForAutocomplete(cm, event, getAllVariablesFunc, options);
+    handleKeyupForAutocomplete(cm, event, options);
  };
  
  editor.on('keyup', keyupHandler);

+  const clickHandler = (cm) => {
+    // Only show hints on click if the option is enabled and there's no active completion
+    if (options.showHintsOnClick) {
+      handleClickForAutocomplete(cm, options);
+    }
+  };
+  
+  // Add click handler if showHintsOnClick is enabled
+  if (options.showHintsOnClick) {
+    editor.on('mousedown', clickHandler);
+  }
+  
  return () => {
    editor.off('keyup', keyupHandler);
+    if (options.showHintsOnClick) {
+      editor.off('mousedown', clickHandler);
+    }
  };
 };

--- a/packages/bruno-app/src/utils/codemirror/autocomplete.spec.js
+++ b/packages/bruno-app/src/utils/codemirror/autocomplete.spec.js
@@ -43,7 +43,7 @@ describe('Bruno Autocomplete', () => {
          envVar2: 'value2',
        };

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -60,7 +60,7 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 9 });
        mockedCodemirror.getRange.mockReturnValue('{{$randomI');
        
-        const result = getAutoCompleteHints(mockedCodemirror, {}, {
+        const result = getAutoCompleteHints(mockedCodemirror, {}, [], {
          showHintsFor: ['variables']
        });

@@ -84,7 +84,7 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 14 });
        mockedCodemirror.getRange.mockReturnValue('{{process.env.N');

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -106,7 +106,7 @@ describe('Bruno Autocomplete', () => {
          path: 'value'
        };

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -134,7 +134,7 @@ describe('Bruno Autocomplete', () => {
          'config.app.name': 'bruno'
        };

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -174,7 +174,7 @@ describe('Bruno Autocomplete', () => {
          mockedCodemirror.getLine.mockReturnValue(input);
          mockedCodemirror.getRange.mockReturnValue(input);

-          const result = getAutoCompleteHints(mockedCodemirror, {}, {
+          const result = getAutoCompleteHints(mockedCodemirror, {}, [], {
            showHintsFor: ['req', 'res', 'bru']
          });

@@ -188,7 +188,7 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue('req.get');
        mockedCodemirror.getRange.mockReturnValue('req.get');

-        const result = getAutoCompleteHints(mockedCodemirror, {}, {
+        const result = getAutoCompleteHints(mockedCodemirror, {}, [], {
          showHintsFor: ['req']
        });

@@ -213,7 +213,7 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue('bru.runner.');
        mockedCodemirror.getRange.mockReturnValue('bru.runner.');

-        const result = getAutoCompleteHints(mockedCodemirror, {}, {
+        const result = getAutoCompleteHints(mockedCodemirror, {}, [], {
          showHintsFor: ['bru']
        });

@@ -234,11 +234,9 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue('Content-');
        mockedCodemirror.getRange.mockReturnValue('Content-');

-        const options = {
-          anywordAutocompleteHints: ['Content-Type', 'Content-Encoding', 'Content-Length']
-        };
+        const customHints = ['Content-Type', 'Content-Encoding', 'Content-Length'];

-        const result = getAutoCompleteHints(mockedCodemirror, {}, options, {
+        const result = getAutoCompleteHints(mockedCodemirror, {}, customHints, {
          showHintsFor: ['variables']
        });

@@ -253,11 +251,9 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue('utils.');
        mockedCodemirror.getRange.mockReturnValue('utils.');

-        const options = {
-          anywordAutocompleteHints: ['utils.string.trim', 'utils.string.capitalize', 'utils.array.map']
-        };
+        const customHints = ['utils.string.trim', 'utils.string.capitalize', 'utils.array.map'];

-        const result = getAutoCompleteHints(mockedCodemirror, {}, options, {
+        const result = getAutoCompleteHints(mockedCodemirror, {}, customHints, {
          showHintsFor: ['variables']
        });

@@ -277,18 +273,14 @@ describe('Bruno Autocomplete', () => {

      it('should respect showHintsFor option for excluding hints', () => {
        const options = { showHintsFor: ['res', 'bru'] };
-        const result = getAutoCompleteHints(mockedCodemirror, {}, options, {
-          showHintsFor: ['req']
-        });
+        const result = getAutoCompleteHints(mockedCodemirror, {}, [], options);

        expect(result).toBeNull();
      });

      it('should show hints when included in showHintsFor', () => {
        const options = { showHintsFor: ['req'] };
-        const result = getAutoCompleteHints(mockedCodemirror, {}, options, {
-          showHintsFor: ['req']
-        });
+        const result = getAutoCompleteHints(mockedCodemirror, {}, [], options);

        expect(result).toBeTruthy();
        expect(result.list).toEqual(
@@ -303,7 +295,7 @@ describe('Bruno Autocomplete', () => {
        const allVariables = { envVar1: 'value1' };
        const options = { showHintsFor: ['req', 'res', 'bru'] };

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, options);
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], options);

        expect(result).toBeNull();
      });
@@ -318,7 +310,7 @@ describe('Bruno Autocomplete', () => {
          allVariables[`var${i}`] = `value${i}`;
        }

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -337,7 +329,7 @@ describe('Bruno Autocomplete', () => {
          'v.banana': 'value3'
        };

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -357,7 +349,7 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue('   ');
        mockedCodemirror.getRange.mockReturnValue('');

-        const result = getAutoCompleteHints(mockedCodemirror, {});
+        const result = getAutoCompleteHints(mockedCodemirror, {}, []);

        expect(result).toBeNull();
      });
@@ -367,8 +359,8 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue('{{varName}}');
        mockedCodemirror.getRange.mockReturnValue('{{varName');

-        const emptyResult = getAutoCompleteHints(mockedCodemirror, {});
-        const nullResult = getAutoCompleteHints(mockedCodemirror, null);
+        const emptyResult = getAutoCompleteHints(mockedCodemirror, {}, []);
+        const nullResult = getAutoCompleteHints(mockedCodemirror, null, []);

        expect(emptyResult).toBeNull();
        expect(nullResult).toBeNull();
@@ -380,7 +372,7 @@ describe('Bruno Autocomplete', () => {
        mockedCodemirror.getLine.mockReturnValue(line);
        mockedCodemirror.getRange.mockReturnValue(line);

-        const result = getAutoCompleteHints(mockedCodemirror, {}, {
+        const result = getAutoCompleteHints(mockedCodemirror, {}, [], {
          showHintsFor: ['req']
        });

@@ -401,7 +393,7 @@ describe('Bruno Autocomplete', () => {
          VARIABLE3: 'value3'
        };

-        const result = getAutoCompleteHints(mockedCodemirror, allVariables, {
+        const result = getAutoCompleteHints(mockedCodemirror, allVariables, [], {
          showHintsFor: ['variables']
        });

@@ -428,7 +420,8 @@ describe('Bruno Autocomplete', () => {

    describe('Setup and cleanup', () => {
      it('should setup keyup event listener and return cleanup function', () => {
-        cleanupFn = setupAutoComplete(mockedCodemirror, mockGetAllVariables);
+        const options = { getAllVariables: mockGetAllVariables };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);

        expect(mockedCodemirror.on).toHaveBeenCalledWith('keyup', expect.any(Function));
        expect(cleanupFn).toBeInstanceOf(Function);
@@ -438,7 +431,7 @@ describe('Bruno Autocomplete', () => {
      });

      it('should not setup if editor is null', () => {
-        const result = setupAutoComplete(null, mockGetAllVariables);
+        const result = setupAutoComplete(null, { getAllVariables: mockGetAllVariables });

        expect(result).toBeUndefined();
        expect(mockedCodemirror.on).not.toHaveBeenCalled();
@@ -447,9 +440,11 @@ describe('Bruno Autocomplete', () => {

    describe('Event handling', () => {
      it('should trigger hints on character key press', () => {
-        cleanupFn = setupAutoComplete(mockedCodemirror, mockGetAllVariables, {
+        const options = { 
+          getAllVariables: mockGetAllVariables,
          showHintsFor: ['req'] 
-        });
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
        const keyupHandler = mockedCodemirror.on.mock.calls[0][1];

        mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 4 });
@@ -464,7 +459,8 @@ describe('Bruno Autocomplete', () => {
      });

      it('should not trigger hints on non-character keys', () => {
-        cleanupFn = setupAutoComplete(mockedCodemirror, mockGetAllVariables);
+        const options = { getAllVariables: mockGetAllVariables };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
        const keyupHandler = mockedCodemirror.on.mock.calls[0][1];

        const nonCharacterKeys = ['Shift', 'Tab', 'Enter', 'Escape', 'ArrowUp', 'ArrowDown', 'Meta'];
@@ -478,7 +474,8 @@ describe('Bruno Autocomplete', () => {
      });

      it('should close existing completion when no hints available', () => {
-        cleanupFn = setupAutoComplete(mockedCodemirror, mockGetAllVariables);
+        const options = { getAllVariables: mockGetAllVariables };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
        const keyupHandler = mockedCodemirror.on.mock.calls[0][1];

        const mockCompletion = { close: jest.fn() };
@@ -495,8 +492,11 @@ describe('Bruno Autocomplete', () => {
      });

      it('should pass options to getAutoCompleteHints', () => {
-        const options = { showHintsFor: ['req'] };
-        cleanupFn = setupAutoComplete(mockedCodemirror, mockGetAllVariables, options);
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          showHintsFor: ['req'] 
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
        const keyupHandler = mockedCodemirror.on.mock.calls[0][1];

        mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 4 });
@@ -512,6 +512,173 @@ describe('Bruno Autocomplete', () => {
        });
      });
    });
+
+    describe('Click event handling (showHintsOnClick)', () => {
+      it('should setup mousedown event listener when showHintsOnClick is enabled', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          showHintsOnClick: true 
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        expect(mockedCodemirror.on).toHaveBeenCalledWith('keyup', expect.any(Function));
+        expect(mockedCodemirror.on).toHaveBeenCalledWith('mousedown', expect.any(Function));
+        expect(mockedCodemirror.on).toHaveBeenCalledTimes(2);
+      });
+
+      it('should not setup mousedown event listener when showHintsOnClick is disabled', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          showHintsOnClick: false 
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        expect(mockedCodemirror.on).toHaveBeenCalledWith('keyup', expect.any(Function));
+        expect(mockedCodemirror.on).toHaveBeenCalledTimes(1);
+      });
+
+      it('should not setup mousedown event listener when showHintsOnClick is undefined', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        expect(mockedCodemirror.on).toHaveBeenCalledWith('keyup', expect.any(Function));
+        expect(mockedCodemirror.on).toHaveBeenCalledTimes(1);
+      });
+
+      it('should show hints on click when showHintsOnClick is enabled', () => {
+        jest.useFakeTimers();
+        
+        const mockGetAnywordAutocompleteHints = jest.fn(() => ['Content-Type', 'Accept']);
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          getAnywordAutocompleteHints: mockGetAnywordAutocompleteHints,
+          showHintsOnClick: true,
+          showHintsFor: ['req', 'variables']
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        // Find the click handler (mousedown event)
+        const clickHandler = mockedCodemirror.on.mock.calls.find(call => call[0] === 'mousedown')[1];
+        
+        mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 0 });
+
+        clickHandler(mockedCodemirror);
+
+        // Run all timers to execute the setTimeout
+        jest.runAllTimers();
+
+        expect(mockGetAllVariables).toHaveBeenCalled();
+        expect(mockGetAnywordAutocompleteHints).toHaveBeenCalled();
+        expect(mockedCodemirror.showHint).toHaveBeenCalled();
+        
+        jest.useRealTimers();
+      });
+
+      it('should not show hints on click when showHintsOnClick is disabled', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          showHintsOnClick: false 
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        // There should be no mousedown handler
+        const mousedownCalls = mockedCodemirror.on.mock.calls.filter(call => call[0] === 'mousedown');
+        expect(mousedownCalls).toHaveLength(0);
+      });
+
+      it('should cleanup mousedown event listener when showHintsOnClick was enabled', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          showHintsOnClick: true 
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        cleanupFn();
+
+        expect(mockedCodemirror.off).toHaveBeenCalledWith('keyup', expect.any(Function));
+        expect(mockedCodemirror.off).toHaveBeenCalledWith('mousedown', expect.any(Function));
+        expect(mockedCodemirror.off).toHaveBeenCalledTimes(2);
+      });
+
+      it('should only cleanup keyup event listener when showHintsOnClick was disabled', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables,
+          showHintsOnClick: false 
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        cleanupFn();
+
+        expect(mockedCodemirror.off).toHaveBeenCalledWith('keyup', expect.any(Function));
+        expect(mockedCodemirror.off).toHaveBeenCalledTimes(1);
+      });
+
+      it('should show all available hints on click based on showHintsFor configuration', () => {
+        jest.useFakeTimers();
+        
+        const mockGetAnywordAutocompleteHints = jest.fn(() => ['Content-Type', 'Accept']);
+        const options = { 
+          getAllVariables: mockGetAllVariables.mockReturnValue({
+            envVar1: 'value1',
+            envVar2: 'value2'
+          }),
+          getAnywordAutocompleteHints: mockGetAnywordAutocompleteHints,
+          showHintsOnClick: true,
+          showHintsFor: ['req', 'variables']
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        // Find the click handler (mousedown event)
+        const clickHandler = mockedCodemirror.on.mock.calls.find(call => call[0] === 'mousedown')[1];
+        
+        const mockCursor = { line: 0, ch: 0 };
+        mockedCodemirror.getCursor.mockReturnValue(mockCursor);
+
+        clickHandler(mockedCodemirror);
+
+        // Run all timers to execute the setTimeout
+        jest.runAllTimers();
+
+        expect(mockedCodemirror.showHint).toHaveBeenCalledWith({
+          hint: expect.any(Function),
+          completeSingle: false
+        });
+
+        // Verify the hint function returns the expected structure
+        const hintCall = mockedCodemirror.showHint.mock.calls[0][0];
+        const hintResult = hintCall.hint();
+        
+        expect(hintResult).toEqual({
+          list: expect.any(Array),
+          from: mockCursor,
+          to: mockCursor
+        });
+        expect(hintResult.list.length).toBeGreaterThan(0);
+        
+        jest.useRealTimers();
+      });
+
+      it('should not show hints on click when no hints are available', () => {
+        const options = { 
+          getAllVariables: mockGetAllVariables.mockReturnValue({}),
+          getAnywordAutocompleteHints: jest.fn(() => []),
+          showHintsOnClick: true,
+          showHintsFor: []
+        };
+        cleanupFn = setupAutoComplete(mockedCodemirror, options);
+
+        // Find the click handler (mousedown event)
+        const clickHandler = mockedCodemirror.on.mock.calls.find(call => call[0] === 'mousedown')[1];
+        
+        mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 0 });
+
+        clickHandler(mockedCodemirror);
+
+        expect(mockedCodemirror.showHint).not.toHaveBeenCalled();
+      });
+    });
  });

  describe('CodeMirror integration', () => {
--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@@ -233,7 +233,8 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
        name: si.name,
        filename: si.filename,
        seq: si.seq,
-        settings: si.settings
+        settings: si.settings,
+        tags: si.tags
      };

      if (si.request) {
@@ -257,8 +258,7 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
          vars: si.request.vars,
          assertions: si.request.assertions,
          tests: si.request.tests,
-          docs: si.request.docs,
-          tags: si.request.tags
+          docs: si.request.docs
        };

        // Handle auth object dynamically
@@ -555,6 +555,7 @@ export const transformRequestToSaveToFilesystem = (item) => {
    name: _item.name,
    seq: _item.seq,
    settings: _item.settings,
+    tags: _item.tags,
    request: {
      method: _item.request.method,
      url: _item.request.url,
@@ -566,8 +567,7 @@ export const transformRequestToSaveToFilesystem = (item) => {
      vars: _item.request.vars,
      assertions: _item.request.assertions,
      tests: _item.request.tests,
-      docs: _item.request.docs,
-      tags: _item.request.tags
+      docs: _item.request.docs
    }
  };

@@ -1108,3 +1108,20 @@ export const calculateDraggedItemNewPathname = ({ draggedItem, targetItem, dropT
 };

 // item sequence utils - END
+
+export const getUniqueTagsFromItems = (items = []) => {
+  const allTags = new Set();
+  const getTags = (items) => {
+    items.forEach(item => {
+      if (isItemARequest(item)) {
+        const tags = item.draft ? get(item, 'draft.tags', []) : get(item, 'tags', []);
+        tags.forEach(tag => allTags.add(tag));
+      }
+      if (item.items) {
+        getTags(item.items);
+      }
+    });
+  };
+  getTags(items);
+  return Array.from(allTags).sort();
+};
--- a/packages/bruno-cli/src/commands/run.js
+++ b/packages/bruno-cli/src/commands/run.js
@@ -462,10 +462,6 @@ const handler = async function (argv) {
        console.error(chalk.red(`Path not found: ${resolvedPath}`));
        process.exit(constants.EXIT_STATUS.ERROR_FILE_NOT_FOUND);
      }
-
-      requestItems = requestItems.filter((item) => {
-        return isRequestTagsIncluded(item.tags, includeTags, excludeTags);
-      });
    }

    requestItems = getCallStack(resolvedPaths, collection, { recursive });
@@ -478,6 +474,10 @@ const handler = async function (argv) {
      });
    }

+    requestItems = requestItems.filter((item) => {
+      return isRequestTagsIncluded(item.tags, includeTags, excludeTags);
+    });
+
    const runtime = getJsSandboxRuntime(sandbox);

    const runSingleRequestByPathname = async (relativeItemPathname) => {
--- a/packages/bruno-cli/src/utils/bru.js
+++ b/packages/bruno-cli/src/utils/bru.js
@@ -64,7 +64,7 @@ const bruToJson = (bru) => {
      name: _.get(json, 'meta.name'),
      seq: !_.isNaN(sequence) ? Number(sequence) : 1,
      settings: _.get(json, 'settings', {}),
-      tags: _.get(json, 'tags', []),
+      tags: _.get(json, 'meta.tags', []),
      request: {
        method: _.upperCase(_.get(json, 'http.method')),
        url: _.get(json, 'http.url'),
--- a/packages/bruno-electron/src/bru/index.js
+++ b/packages/bruno-electron/src/bru/index.js
@@ -138,6 +138,7 @@ const bruToJson = (data, parsed = false) => {
      name: _.get(json, 'meta.name'),
      seq: !_.isNaN(sequence) ? Number(sequence) : 1,
      settings: _.get(json, 'settings', {}),
+      tags: _.get(json, 'meta.tags', []),
      request: {
        method: _.upperCase(_.get(json, 'http.method')),
        url: _.get(json, 'http.url'),
@@ -149,14 +150,12 @@ const bruToJson = (data, parsed = false) => {
        vars: _.get(json, 'vars', {}),
        assertions: _.get(json, 'assertions', []),
        tests: _.get(json, 'tests', ''),
-        docs: _.get(json, 'docs', ''),
-        tags: _.get(json, 'tags', [])
+        docs: _.get(json, 'docs', '')
      }
    };

    transformedJson.request.auth.mode = _.get(json, 'http.auth', 'none');
    transformedJson.request.body.mode = _.get(json, 'http.body', 'none');
-
    return transformedJson;
  } catch (e) {
    return Promise.reject(e);
@@ -196,7 +195,8 @@ const jsonToBru = async (json) => {
    meta: {
      name: _.get(json, 'name'),
      type: type,
-      seq: !_.isNaN(sequence) ? Number(sequence) : 1
+      seq: !_.isNaN(sequence) ? Number(sequence) : 1,
+      tags: _.get(json, 'tags', []),
    },
    http: {
      method: _.lowerCase(_.get(json, 'request.method')),
@@ -216,8 +216,7 @@ const jsonToBru = async (json) => {
    assertions: _.get(json, 'request.assertions', []),
    tests: _.get(json, 'request.tests', ''),
    settings: _.get(json, 'settings', {}),
-    docs: _.get(json, 'request.docs', ''),
-    tags: _.get(json, 'request.tags', [])
+    docs: _.get(json, 'request.docs', '')
  };

  const bru = jsonToBruV2(bruJson);
@@ -239,7 +238,8 @@ const jsonToBruViaWorker = async (json) => {
    meta: {
      name: _.get(json, 'name'),
      type: type,
-      seq: !_.isNaN(sequence) ? Number(sequence) : 1
+      seq: !_.isNaN(sequence) ? Number(sequence) : 1,
+      tags: _.get(json, 'tags', [])
    },
    http: {
      method: _.lowerCase(_.get(json, 'request.method')),
@@ -259,8 +259,7 @@ const jsonToBruViaWorker = async (json) => {
    assertions: _.get(json, 'request.assertions', []),
    tests: _.get(json, 'request.tests', ''),
    settings: _.get(json, 'settings', {}),
-    docs: _.get(json, 'request.docs', ''),
-    tags: _.get(json, 'request.tags', [])
+    docs: _.get(json, 'request.docs', '')
  };

  const bru = await bruParserWorker?.jsonToBru(bruJson)
--- a/packages/bruno-electron/src/ipc/network/index.js
+++ b/packages/bruno-electron/src/ipc/network/index.js
@@ -1017,8 +1017,8 @@ const registerNetworkIpc = (mainWindow) => {
        if (tags && tags.include && tags.exclude) {
          const includeTags = tags.include ? tags.include : [];
          const excludeTags = tags.exclude ? tags.exclude : [];
-          folderRequests = folderRequests.filter(({ request }) => {
-            return isRequestTagsIncluded(request.tags, includeTags, excludeTags)
+          folderRequests = folderRequests.filter(({ tags }) => {
+            return isRequestTagsIncluded(tags, includeTags, excludeTags)
          });
        }

--- a/packages/bruno-lang/v2/src/bruToJson.js
+++ b/packages/bruno-lang/v2/src/bruToJson.js
@@ -52,7 +52,7 @@ const grammar = ohm.grammar(`Bru {
  pairlist = optionalnl* pair (~tagend stnl* pair)* (~tagend space)*
  pair = st* key st* ":" st* value st*
  key = keychar*
-  value = multilinetextblock | valuechar*
+  value = list | multilinetextblock | valuechar*

  // Dictionary for Assert Block
  assertdictionary = st* "{" assertpairlist? tagend
@@ -67,12 +67,11 @@ const grammar = ohm.grammar(`Bru {
  textchar = ~nl any

  // List
-  listend = nl "]"
+  listend = stnl* "]"
  list = st* "[" listitems? listend
-  listitems = (~listend nl)* listitem (~listend stnl* listitem)* (~listend space)*
+  listitems = (~listend stnl)* listitem (~listend stnl* listitem)* (~listend space)*
  listitem = st* textchar+ st*

-  tags = "tags" list
  meta = "meta" dictionary
  settings = "settings" dictionary

@@ -276,6 +275,10 @@ const sem = grammar.createSemantics().addAttribute('ast', {
  },
  pair(_1, key, _2, _3, _4, value, _5) {
    let res = {};
+    if (Array.isArray(value.ast)) {
+      res[key.ast] = value.ast;
+      return res;
+    }
    res[key.ast] = value.ast ? value.ast.trim() : '';
    return res;
  },
@@ -283,6 +286,9 @@ const sem = grammar.createSemantics().addAttribute('ast', {
    return chars.sourceString ? chars.sourceString.trim() : '';
  },
  value(chars) {
+    if (chars.ctorName === 'list') {
+      return chars.ast;
+    }
    try {
      let isMultiline = chars.sourceString?.startsWith(`'''`) && chars.sourceString?.endsWith(`'''`);
      if (isMultiline) {
@@ -342,9 +348,6 @@ const sem = grammar.createSemantics().addAttribute('ast', {
  _iter(...elements) {
    return elements.map((e) => e.ast);
  },
-  tags(_1, list) {
-    return { tags: list.ast };
-  },
  meta(_1, dictionary) {
    let meta = mapPairListToKeyValPair(dictionary.ast);

--- a/packages/bruno-lang/v2/src/jsonToBru.js
+++ b/packages/bruno-lang/v2/src/jsonToBru.js
@@ -36,18 +36,23 @@ const jsonToBru = (json) => {

  if (meta) {
    bru += 'meta {\n';
+
+    const tags = meta.tags;
+    delete meta.tags;
+
    for (const key in meta) {
      bru += `  ${key}: ${meta[key]}\n`;
    }
-    bru += '}\n\n';
-  }

-  if (tags) {
-    bru += 'tags [\n';
-    for (const tag of tags) {
-      bru += `  ${tag}\n`;
+    if (tags && tags.length) {
+      bru += `  tags: [\n`;
+      for (const tag of tags) {
+        bru += `    ${tag}\n`;
+      }
+      bru += `  ]\n`;
    }
-    bru += ']\n\n';
+
+    bru += '}\n\n';
  }

  if (http && http.method) {
--- a/packages/bruno-lang/v2/tests/fixtures/request.bru
+++ b/packages/bruno-lang/v2/tests/fixtures/request.bru
@@ -2,13 +2,12 @@ meta {
  name: Send Bulk SMS
  type: http
  seq: 1
+  tags: [
+    foo
+    bar
+  ]
 }

-tags [
-  foo
-  bar
-]
-
 get {
  url: https://api.textlocal.in/send/:id
  body: json
--- a/packages/bruno-lang/v2/tests/fixtures/request.json
+++ b/packages/bruno-lang/v2/tests/fixtures/request.json
@@ -2,9 +2,9 @@
  "meta": {
    "name": "Send Bulk SMS",
    "type": "http",
-    "seq": "1"
+    "seq": "1",
+    "tags": ["foo", "bar"]
  },
-  "tags": ["foo", "bar"],
  "http": {
    "method": "get",
    "url": "https://api.textlocal.in/send/:id",
--- a/packages/bruno-lang/v2/tests/tags.spec.js
+++ b/packages/bruno-lang/v2/tests/tags.spec.js
@@ -0,0 +1,33 @@
+/**
+ * This test file is used to test the text parser.
+ */
+const parser = require('../src/bruToJson');
+
+describe('tags parser', () => {
+  it('should parse request tags', () => {
+    const input = `
+meta {
+  name: request
+  type: http
+  seq: 1
+  tags: [
+    tag_1
+    tag_2
+    tag_3
+    tag_4
+  ]
+}
+`;
+
+    const output = parser(input);
+    const expected = {
+      meta: {
+        name: 'request',
+        type: 'http',
+        tags: ['tag_1', 'tag_2', 'tag_3', 'tag_4'],
+        seq: '1'
+      }
+    };
+    expect(output).toEqual(expected);
+  });
+});
--- a/packages/bruno-schema/src/collections/index.js
+++ b/packages/bruno-schema/src/collections/index.js
@@ -310,8 +310,7 @@ const requestSchema = Yup.object({
    .nullable(),
  assertions: Yup.array().of(keyValueSchema).nullable(),
  tests: Yup.string().nullable(),
-  docs: Yup.string().nullable(),
-  tags: Yup.array().of(Yup.string().matches(/^[\w-]+$/, 'tag must be alphanumeric'))
+  docs: Yup.string().nullable()
 })
  .noUnknown(true)
  .strict();
@@ -356,6 +355,7 @@ const itemSchema = Yup.object({
  type: Yup.string().oneOf(['http-request', 'graphql-request', 'folder', 'js']).required('type is required'),
  seq: Yup.number().min(1),
  name: Yup.string().min(1, 'name must be at least 1 character').required('name is required'),
+  tags: Yup.array().of(Yup.string().matches(/^[\w-]+$/, 'tag must be alphanumeric')),
  request: requestSchema.when('type', {
    is: (type) => ['http-request', 'graphql-request'].includes(type),
    then: (schema) => schema.required('request is required when item-type is request')
--- a/packages/bruno-schema/src/collections/itemSchema.spec.js
+++ b/packages/bruno-schema/src/collections/itemSchema.spec.js
@@ -7,7 +7,8 @@ describe('Item Schema Validation', () => {
    const item = {
      uid: uuid(),
      name: 'A Folder',
-      type: 'folder'
+      type: 'folder',
+      tags: ['smoke-test']
    };

    const isValid = await itemSchema.validate(item);
--- a/packages/bruno-schema/src/collections/requestSchema.spec.js
+++ b/packages/bruno-schema/src/collections/requestSchema.spec.js
@@ -9,7 +9,6 @@ describe('Request Schema Validation', () => {
      method: 'GET',
      headers: [],
      params: [],
-      tags: ['smoke-test'],
      body: {
        mode: 'none'
      }