@integry/sdk 4.7.39 → 4.7.40

package/src/components/TagsMenu/index.ts

@@ -1,1697 +0,0 @@
-'use client';
-
-import { html } from 'htm/preact';
-import { useState, useEffect } from 'preact/hooks';
-import { Hint } from '@/components/Tooltip';
-import styles from './styles.module.scss';
-
-// Update the TagNode interface to better handle various types
-interface TagNode {
-  name?: string; // Step name or field name
-  machineName?: string; // Machine-readable name for the step
-  appIcon?: string; // URL for the step's app icon
-  output?: Record<string, unknown> | unknown[]; // JSON data for step output
-  tags?: Record<string, TagNode>; // Nested tags or fields
-  ignoreParentKey?: boolean; // If true, omit parent key from final tag path
-  [key: string]: unknown; // Allow for additional properties
-}
-
-// Define the structure of the entire data object
-interface TagData {
-  [key: string]: TagNode;
-}
-
-// Add this interface for the Values tab items
-interface ValueItem {
-  id: number;
-  value: string;
-}
-
-// Define the props for the TagMenu component
-interface TagMenuProps {
-  data: TagData;
-  onSelect: (tag: TagNode | Record<string, unknown>) => void;
-  onOptionClick?: (option: Record<string, unknown>) => void;
-}
-
-interface TagListProps {
-  tags: Record<string, unknown> | unknown[];
-  searchTerm: string;
-  level?: number;
-  path?: string;
-  globalSearchMode?: boolean;
-  onSelect?: (tag: Record<string, unknown>) => void;
-  activeTab?: string;
-  parentAppIcon?: string; // Add parent app icon to props
-  ignoreParentKey?: boolean; // whether parent key should be ignored in tag path
-}
-
-interface TagsMenuProps {
-  tagsTree: Record<string, unknown>;
-  onSelect: (tag: Record<string, unknown>) => void;
-  renderValuesTab?: boolean;
-  options?: Record<string, unknown>;
-  onOptionClick?: (option: Record<string, unknown>) => void;
-}
-
-// Helper function to convert nested tags arrays to objects
-function convertNestedTagsToObject(tags: TagNode[]): Record<string, TagNode> {
-  const result: Record<string, TagNode> = {};
-
-  tags.forEach((tag, index) => {
-    const tagKey = tag.machineName || `[${index}]`;
-
-    if (tag.tags && Array.isArray(tag.tags)) {
-      result[tagKey] = {
-        ...tag,
-        tags: convertNestedTagsToObject(tag.tags),
-      };
-    } else {
-      result[tagKey] = tag;
-    }
-  });
-
-  return result;
-}
-
-// Add a type guard function to check if a value is a TagNode
-function isTagNode(value: unknown): value is TagNode {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    !Array.isArray(value) &&
-    Object.prototype.hasOwnProperty.call(value, 'machineName')
-  );
-}
-
-// Update the arrayToObject function with proper typing
-const arrayToObject = (arr: unknown[]): Record<string, unknown> =>
-  arr.reduce<Record<string, unknown>>((obj, item, index) => {
-    const newObj = { ...obj };
-    newObj[`[${index}]`] = item;
-    return newObj;
-  }, {});
-
-// Check if output data matches the search term
-const outputMatchesSearch = (output: unknown, term: string): boolean => {
-  if (!term || !output) return false;
-  const lowerTerm = term.toLowerCase();
-
-  if (typeof output === 'string') {
-    return output.toLowerCase().includes(lowerTerm);
-  }
-
-  if (Array.isArray(output)) {
-    return output.some(
-      (item) =>
-        (typeof item === 'string' && item.toLowerCase().includes(lowerTerm)) ||
-        (typeof item === 'object' &&
-          item !== null &&
-          outputMatchesSearch(item, lowerTerm)),
-    );
-  }
-
-  if (typeof output === 'object' && output !== null) {
-    return Object.entries(output as Record<string, unknown>).some(
-      ([key, val]) => {
-        if (key.toLowerCase().includes(lowerTerm)) return true;
-
-        if (typeof val === 'string') {
-          return val.toLowerCase().includes(lowerTerm);
-        }
-
-        if (typeof val === 'object' && val !== null) {
-          return outputMatchesSearch(val, lowerTerm);
-        }
-
-        return false;
-      },
-    );
-  }
-
-  return false;
-};
-
-// Function to count matches in a generic object
-const countMatchesInObject = (obj: unknown, term: string): number => {
-  if (!obj || typeof obj !== 'object') return 0;
-
-  let count = 0;
-
-  // Handle arrays specifically
-  if (Array.isArray(obj)) {
-    obj.forEach((item) => {
-      if (typeof item === 'string' && item.toLowerCase().includes(term)) {
-        count += 1;
-      } else if (typeof item === 'object' && item !== null) {
-        count += countMatchesInObject(item, term);
-      }
-    });
-    return count;
-  }
-
-  Object.entries(obj as Record<string, unknown>).forEach(([key, value]) => {
-    if (key.toLowerCase().includes(term)) {
-      count += 1;
-    }
-
-    if (typeof value === 'string' && value.toLowerCase().includes(term)) {
-      count += 1;
-    } else if (typeof value === 'object' && value !== null) {
-      count += countMatchesInObject(value, term);
-    }
-  });
-
-  return count;
-};
-
-// Count matches in a nested structure
-const countSearchMatches = (
-  tags: Record<string, TagNode>,
-  term: string,
-): number => {
-  let count = 0;
-
-  Object.entries(tags).forEach(([key, value]) => {
-    // Check if the key, name, or machineName matches
-    if (
-      key.toLowerCase().includes(term) ||
-      (isTagNode(value) &&
-        value.name &&
-        value.name.toLowerCase().includes(term)) ||
-      (isTagNode(value) &&
-        value.machineName &&
-        value.machineName.toLowerCase().includes(term))
-    ) {
-      count += 1;
-    }
-
-    // Check output data for matches
-    if (value.output) {
-      count += countMatchesInObject(value.output, term);
-    }
-
-    // Check nested tags
-    if (value.tags) {
-      count += countSearchMatches(value.tags, term);
-    }
-  });
-
-  return count;
-};
-
-// Type icon component to render different icons based on data type
-const TypeIcon = ({ value }: { value: unknown }) => {
-  // Determine the type of value
-  const getTypeIcon = (iconValue: unknown) => {
-    if (iconValue === null || iconValue === undefined) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="lucide lucide-ban h-4 w-4"
-        >
-          <circle cx="12" cy="12" r="10"></circle>
-          <path d="m4.93 4.93 14.14 14.14"></path>
-        </svg>
-      `;
-    }
-
-    if (typeof iconValue === 'string') {
-      return html`
-        <img
-          src="data:image/svg+xml,%3csvg%20width='23'%20height='15'%20viewBox='0%200%2023%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4.12408%2010.2498H9.09622L9.5856%2011.7004H9.08601C8.59375%2011.7004%208.24266%2011.8106%208.03275%2012.0311C7.82284%2012.2516%207.71835%2012.536%207.71835%2012.8844C7.71835%2013.24%207.82284%2013.5289%208.03275%2013.7493C8.24266%2013.9698%208.59375%2014.08%209.08601%2014.08H11.8424C12.3347%2014.08%2012.6839%2013.9698%2012.8902%2013.7493C13.0964%2013.5289%2013.2%2013.2444%2013.2%2012.896C13.2%2012.4782%2013.0469%2012.1413%2012.7408%2011.8862C12.5877%2011.7627%2012.2714%2011.7004%2011.792%2011.7004L7.71839%200.0115555L3.29537%200C2.80219%200%202.45111%200.110217%202.2412%200.330662C2.03221%200.551119%201.92679%200.840001%201.92679%201.19556C1.92679%201.55111%202.0322%201.84001%202.2412%202.06045C2.45111%202.28089%202.80219%202.39112%203.29537%202.39112H4.63279L1.41807%2011.7004C0.912084%2011.6853%200.549076%2011.7893%200.329075%2012.0142C0.110001%2012.2382%200%2012.5289%200%2012.8844C0%2013.24%200.104491%2013.5289%200.314408%2013.7493C0.524319%2013.9698%200.875405%2014.08%201.36767%2014.08H4.12408C4.61634%2014.08%204.96743%2013.9698%205.17734%2013.7493C5.38725%2013.5289%205.49175%2013.2444%205.49175%2012.896C5.49175%2012.5404%205.38725%2012.2515%205.17734%2012.0311C4.96743%2011.8107%204.61634%2011.7004%204.12408%2011.7004H3.62449L4.12408%2010.2498ZM6.60013%203.1573L8.24738%207.87022H4.94279L6.60013%203.1573Z'%20fill='%23999999'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.523%2013.1856V13.7089L21.6596%2013.7089C22.0995%2013.7089%2022.4124%2013.6051%2022.5991%2013.3983C22.7866%2013.1916%2022.88%2012.9248%2022.88%2012.597C22.88%2012.2633%2022.7866%2011.9922%2022.5991%2011.7855C22.4124%2011.5787%2022.0995%2011.4749%2021.6596%2011.4749H21.3485V6.87643C21.3485%205.83759%2021.0347%205.01831%2020.409%204.41862C19.7823%203.8198%2018.9025%203.51953%2017.7685%203.51953C17.3883%203.51953%2016.9639%203.565%2016.4946%203.65594C16.0262%203.74688%2015.5655%203.86871%2015.1143%204.02141C14.7764%204.13723%2014.5534%204.23761%2014.4471%204.32082C14.34%204.40404%2014.257%204.51471%2014.1974%204.65283C14.1377%204.79095%2014.1083%204.95481%2014.1083%205.14355C14.1083%205.47813%2014.193%205.75181%2014.3624%205.96628C14.531%206.18075%2014.7375%206.28799%2014.9813%206.28799C15.1593%206.28799%2015.4082%206.2408%2015.7289%206.14643C16.5897%205.88477%2017.2906%205.75351%2017.8308%205.75351C18.4894%205.75351%2018.9362%205.85903%2019.1713%206.07007C19.4055%206.28027%2019.523%206.55309%2019.523%206.88681V7.42128C18.7988%207.27544%2018.1601%207.20337%2017.6078%207.20337C16.231%207.20337%2015.1515%207.60489%2014.3711%208.40702C13.5906%209.21007%2013.2%2010.08%2013.2%2011.0177C13.2%2011.7872%2013.5059%2012.4907%2014.1169%2013.1264C14.7288%2013.7621%2015.524%2014.0795%2016.5041%2014.0795C16.9552%2014.0795%2017.4565%2014.0049%2018.0088%2013.8565C18.561%2013.7072%2019.0658%2013.4842%2019.523%2013.1856ZM17.5015%209.4477C18.1185%209.4477%2018.7927%209.53521%2019.523%209.70936V10.6685C19.0891%2011.0322%2018.5948%2011.3188%2018.0399%2011.5298C17.485%2011.74%2016.9872%2011.8455%2016.5482%2011.8455C16.0322%2011.8455%2015.6251%2011.7254%2015.3287%2011.4861C15.1679%2011.3548%2015.0875%2011.1841%2015.0875%2010.9739C15.0875%2010.6831%2015.2543%2010.3965%2015.5862%2010.1126C16.1212%209.66989%2016.759%209.4477%2017.5015%209.4477Z'%20fill='%23999999'/%3e%3c/svg%3e"
-          alt="alt-icon"
-          class="type-icon"
-        />
-      `;
-    }
-
-    if (typeof iconValue === 'number') {
-      return html`
-        <img
-          src="data:image/svg+xml,%3csvg%20width='15'%20height='8'%20viewBox='0%200%2015%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.37681%207.86147H1.83754V1.92808L0%202.49799V1.24633L3.2117%200.0958716H3.37681V7.86147Z'%20fill='%23999999'/%3e%3cpath%20d='M9.39897%207.86147H4.08342V6.80688L6.59206%204.13313C6.93649%203.75675%207.19037%203.4283%207.35371%203.14778C7.5206%202.86727%207.60404%202.60096%207.60404%202.34885C7.60404%202.00443%207.51704%201.73457%207.34305%201.53927C7.16907%201.34043%206.92051%201.241%206.59739%201.241C6.24941%201.241%205.97422%201.36173%205.77183%201.60319C5.57298%201.84109%205.47356%202.15534%205.47356%202.54592H3.92896C3.92896%202.07367%204.04081%201.64225%204.26451%201.25166C4.49176%200.861069%204.81133%200.5557%205.22323%200.335551C5.63512%200.11185%206.10205%200%206.62402%200C7.42295%200%208.04256%200.191743%208.48286%200.57523C8.92671%200.958716%209.14864%201.50021%209.14864%202.19972C9.14864%202.58321%209.04921%202.9738%208.85037%203.37148C8.65152%203.76917%208.31065%204.23255%207.82774%204.76162L6.06477%206.62047H9.39897V7.86147Z'%20fill='%23999999'/%3e%3cpath%20d='M11.3675%203.30224H12.1878C12.5784%203.30224%2012.8677%203.2046%2013.0559%203.0093C13.2441%202.81401%2013.3382%202.5548%2013.3382%202.23168C13.3382%201.91921%2013.2441%201.67598%2013.0559%201.50199C12.8713%201.328%2012.6156%201.241%2012.289%201.241C11.9942%201.241%2011.7475%201.32267%2011.5486%201.48601C11.3498%201.6458%2011.2504%201.85529%2011.2504%202.1145H9.71108C9.71108%201.70971%209.81938%201.34753%2010.036%201.02796C10.2561%200.704834%2010.5615%200.452727%2010.9521%200.271636C11.3462%200.0905454%2011.7794%200%2012.2517%200C13.0719%200%2013.7146%200.197069%2014.1798%200.591208C14.6449%200.981796%2014.8775%201.52152%2014.8775%202.21037C14.8775%202.56545%2014.7692%202.89213%2014.5526%203.19039C14.336%203.48866%2014.0519%203.71769%2013.7004%203.87747C14.1372%204.03371%2014.4621%204.26806%2014.6751%204.58053C14.8917%204.893%2015%205.26229%2015%205.68838C15%206.37724%2014.7479%206.92939%2014.2437%207.34483C13.743%207.76027%2013.079%207.968%2012.2517%207.968C11.4776%207.968%2010.8438%207.76382%2010.3502%207.35548C9.86022%206.94714%209.61521%206.40742%209.61521%205.73632H11.1545C11.1545%206.02748%2011.2628%206.26539%2011.4794%206.45003C11.6995%206.63467%2011.9694%206.72699%2012.289%206.72699C12.6547%206.72699%2012.9405%206.63112%2013.1465%206.43938C13.356%206.24408%2013.4607%205.98665%2013.4607%205.66708C13.4607%204.893%2013.0346%204.50597%2012.1824%204.50597H11.3675V3.30224Z'%20fill='%23999999'/%3e%3c/svg%3e"
-          alt="alt-icon"
-          class="type-icon"
-        />
-      `;
-    }
-
-    if (typeof iconValue === 'boolean') {
-      // Single icon for all boolean values
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="#71717a"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="lucide lucide-toggle-right h-4 w-4"
-        >
-          <rect width="20" height="12" x="2" y="6" rx="6" ry="6"></rect>
-          <circle cx="16" cy="12" r="2"></circle>
-        </svg>
-      `;
-    }
-
-    if (Array.isArray(iconValue)) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="#71717a"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-layers"
-        >
-          <path
-            d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
-          />
-          <path
-            d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
-          />
-          <path
-            d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
-          />
-        </svg>
-      `;
-    }
-
-    if (typeof iconValue === 'object') {
-      return html`
-        <img
-          src="data:image/svg+xml,%3csvg%20width='14'%20height='15'%20viewBox='0%200%2014%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12.8419%203.40522L7.78708%200.494922C7.3822%200.269922%206.88708%200.269922%206.49684%200.494922L1.44199%203.40522C1.03711%203.63022%200.796875%204.06498%200.796875%204.53022V10.3649C0.796875%2010.8302%201.05175%2011.2497%201.44199%2011.4899L6.49684%2014.3996C6.69197%2014.5197%206.91696%2014.5795%207.14196%2014.5795C7.36696%2014.5795%207.59196%2014.5197%207.78708%2014.3996L12.8419%2011.4746C13.2468%2011.2496%2013.4871%2010.8149%2013.4871%2010.3496V4.53007C13.4871%204.06483%2013.2322%203.63007%2012.8419%203.40507V3.40522ZM7.00723%201.38022C7.05235%201.35034%207.09747%201.35034%207.142%201.35034C7.18712%201.35034%207.23223%201.36557%207.27677%201.38022L11.9421%204.08022L7.14207%206.83992L2.34207%204.08022L7.00723%201.38022ZM1.96693%2010.5899C1.89193%2010.5448%201.83217%2010.4552%201.83217%2010.3649V4.96492L6.63217%207.73992V13.2746L1.96693%2010.5899ZM12.3169%2010.5899L7.65163%2013.2899V7.73992L12.4516%204.96492V10.3496C12.4516%2010.4551%2012.4071%2010.5301%2012.3169%2010.5899L12.3169%2010.5899Z'%20fill='%23999999'/%3e%3c/svg%3e"
-          alt="alt-icon"
-          class="type-icon"
-        />
-      `;
-    }
-
-    // Default tag icon for any other type
-    return html`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        class="lucide lucide-tag h-4 w-4"
-      >
-        <path
-          d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
-        ></path>
-        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
-      </svg>
-    `;
-  };
-
-  return html`<span class="${styles.tagIcon}">${getTypeIcon(value)}</span>`;
-};
-
-// Add a new component to render the flat list of values
-const ValuesList = ({
-  values,
-  onSelect,
-  onOptionClick,
-}: {
-  values: ValueItem[];
-  onSelect: (item: Record<string, unknown>) => void;
-  onOptionClick: (option: Record<string, unknown>) => void;
-}) =>
-  html`
-    <div class="${styles.valuesList}">
-      <ul>
-        ${values.map(
-          (item) => html`
-            <li
-              key=${item.id}
-              class="${styles.valueItem}"
-              onClick=${() =>
-                onOptionClick({
-                  id: item.id,
-                  value: item.value,
-                })}
-            >
-              <span class="${styles.valueText}">${item.value}</span>
-            </li>
-          `,
-        )}
-      </ul>
-    </div>
-  `;
-
-// Update the TagList component to pass parent app icon and include it in selections
-const TagList = ({
-  tags,
-  searchTerm,
-  level = 0,
-  path = '',
-  globalSearchMode = false,
-  onSelect = (tag: Record<string, unknown>): void => {
-    /* Default empty implementation */
-  },
-  activeTab = '',
-  parentAppIcon = undefined, // Add parent app icon parameter
-  ignoreParentKey = false,
-}: TagListProps) => {
-  // Track which nodes are expanded to show nested steps
-  const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>(
-    {},
-  );
-
-  // Track which steps have their output expanded
-  const [expandedOutputs, setExpandedOutputs] = useState<
-    Record<string, boolean>
-  >({});
-
-  // Track which node is being hovered
-  const [hoveredNode, setHoveredNode] = useState<string | null>(null);
-
-  // Handle arrays by converting them to objects with indices as keys
-  const processedTags = Array.isArray(tags)
-    ? arrayToObject(tags)
-    : (tags as Record<string, unknown>);
-
-  // Update the nodeMatchesSearch function with proper type checking
-  const nodeMatchesSearch = (
-    key: string,
-    node: unknown,
-    term: string,
-  ): boolean => {
-    if (!term) return false;
-    const lowerTerm = term.toLowerCase();
-
-    return (
-      key?.toLowerCase().includes(lowerTerm) ||
-      (isTagNode(node) &&
-        node.name &&
-        node.name.toLowerCase().includes(lowerTerm)) ||
-      (isTagNode(node) &&
-        node.machineName &&
-        node.machineName.toLowerCase().includes(lowerTerm)) ||
-      false
-    );
-  };
-
-  // Update the childrenMatchSearch function with proper type checking
-  const childrenMatchSearch = (node: unknown, term: string): boolean => {
-    if (!term) return false;
-
-    // Check if node is an array
-    if (Array.isArray(node)) {
-      return node.some(
-        (item) =>
-          (typeof item === 'string' && item.toLowerCase().includes(term)) ||
-          (typeof item === 'object' &&
-            item !== null &&
-            outputMatchesSearch(item, term)),
-      );
-    }
-
-    // Check if node has tags
-    if (isTagNode(node) && node.tags) {
-      return Object.entries(node.tags).some(
-        ([childKey, childNode]) =>
-          nodeMatchesSearch(childKey, childNode, term) ||
-          childrenMatchSearch(childNode, term) ||
-          (isTagNode(childNode) &&
-            childNode.output &&
-            outputMatchesSearch(childNode.output, term)),
-      );
-    }
-
-    return false;
-  };
-
-  // Add the isExpandable function with proper type checking
-  const isExpandable = (value: unknown): boolean => {
-    if (value === null || value === undefined) return false;
-
-    // Arrays with items are expandable
-    if (Array.isArray(value)) return value.length > 0;
-
-    // Objects with properties are expandable
-    if (typeof value === 'object') {
-      // Check if it's a TagNode with tags
-      if (isTagNode(value)) {
-        // Check if it has tags
-        if (value.tags && Object.keys(value.tags).length > 0) {
-          return true;
-        }
-
-        // Check if it has output that is expandable
-        if (value.output) {
-          if (Array.isArray(value.output) && value.output.length > 0) {
-            return true;
-          }
-          if (
-            typeof value.output === 'object' &&
-            value.output !== null &&
-            Object.keys(value.output as Record<string, unknown>).length > 0
-          ) {
-            return true;
-          }
-        }
-      }
-
-      // Regular object with properties
-      return Object.keys(value as Record<string, unknown>).length > 0;
-    }
-
-    return false;
-  };
-
-  // Initialize expandedNodes for steps with nested steps and handle search expansion
-  useEffect(() => {
-    const initialExpanded: Record<string, boolean> = {};
-    const initialOutputs: Record<string, boolean> = {};
-
-    Object.entries(processedTags).forEach(([key, value]) => {
-      // Auto-expand steps that have nested steps
-      if (
-        isTagNode(value) &&
-        value.tags &&
-        Object.keys(value.tags).length > 0
-      ) {
-        initialExpanded[key] = true;
-      }
-
-      // If in search mode, check if this node or its children match the search
-      if (
-        searchTerm &&
-        (nodeMatchesSearch(key, value, searchTerm) ||
-          childrenMatchSearch(value, searchTerm))
-      ) {
-        initialExpanded[key] = true;
-
-        // If the node has output and the output matches the search, expand the output too
-        if (
-          isTagNode(value) &&
-          value.output &&
-          outputMatchesSearch(value.output, searchTerm)
-        ) {
-          initialOutputs[key] = true;
-        }
-      }
-    });
-
-    setExpandedNodes((prev) => ({ ...prev, ...initialExpanded }));
-    setExpandedOutputs((prev) => ({ ...prev, ...initialOutputs }));
-  }, [processedTags, searchTerm]);
-
-  // Update the toggleExpand function with proper type checking
-  const toggleExpand = (key: string, event?: Event) => {
-    if (event) {
-      event.stopPropagation(); // Prevent event bubbling
-    }
-
-    // Get the node that we want to toggle
-    const node = processedTags[key];
-
-    if (isTagNode(node)) {
-      // If it's a TagNode with tags, toggle output expansion
-      if (node.tags && Object.keys(node.tags).length > 0) {
-        // Toggle the output expansion
-        setExpandedOutputs((prev) => ({
-          ...prev,
-          [key]: !prev[key],
-        }));
-        return;
-      }
-
-      // If it's a TagNode with expandable output, toggle node expansion
-      if (node.output && isExpandable(node.output)) {
-        setExpandedNodes((prev) => ({
-          ...prev,
-          [key]: !prev[key],
-        }));
-        return;
-      }
-    }
-
-    // For arrays, objects, or steps without nested tags - toggle normal expansion
-    setExpandedNodes((prev) => {
-      const newExpandedNodes = { ...prev };
-      // Toggle the value
-      newExpandedNodes[key] = !prev[key];
-      return newExpandedNodes;
-    });
-  };
-
-  const toggleOutputExpand = (key: string, e: Event) => {
-    e.stopPropagation(); // Prevent the click from affecting the parent
-    setExpandedOutputs((prev) => ({
-      ...prev,
-      [key]: !prev[key],
-    }));
-  };
-
-  const escapeHTMLIfNeeded = (input: any) => {
-    if (typeof input !== 'string') {
-      return input;
-    }
-    const isHTML = /<\/?[a-z][\s\S]*>/i.test(input);
-
-    const output = isHTML
-      ? input
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#039;')
-      : input;
-
-    return output.length > 200 ? `${output.slice(0, 200)}...` : output;
-  };
-
-  const highlightSearchTerm = (text: string, term: string) => {
-    const textModified = escapeHTMLIfNeeded(text);
-    if (!term) return textModified;
-    const regex = new RegExp(`(${term})`, 'gi');
-    return textModified.replace(regex, '<mark>$1</mark>');
-  };
-
-  const extractStepsFromOutputPath = (pathToExtract: string) => {
-    const parts = pathToExtract.split('.'); // Split the string by dots
-
-    // Find the first occurrence of 'output'
-    const firstOutputIndex = parts.indexOf('output');
-
-    if (firstOutputIndex === -1 || firstOutputIndex === 0) {
-      return ''; // Return empty if 'output' is not found or it's at the start
-    }
-
-    // Get the step name (part before the first 'output')
-    const stepName = parts[firstOutputIndex - 1];
-
-    // Get all parts after the first 'output', including any other 'output' keys
-    const remainingParts = parts.slice(firstOutputIndex + 1);
-
-    // If there are remaining parts, combine the step name with them
-    if (remainingParts.length > 0) {
-      return `${stepName}.${remainingParts.join('.')}`;
-    }
-
-    // If there are no remaining parts, just return the step name
-    return stepName;
-  };
-
-  // Modified function to handle selecting a tag with parent app icon
-  const handleSelectTag = (
-    key: string,
-    value: unknown,
-    currentPath: string,
-    nodeAppIcon?: string,
-    ignoreKey = false,
-  ) => {
-    const basePath = extractStepsFromOutputPath(currentPath);
-    const tagPath = ignoreKey ? basePath : `${activeTab}.${basePath}`;
-
-    // Determine which app icon to use - prioritize node's own icon, then parent icon
-    const appIconToUse = nodeAppIcon || parentAppIcon;
-
-    onSelect({
-      currentPath: tagPath
-        .replace(/\bparameters\.parameters\b/g, 'parameters')
-        .replace(/\bauthorization\.authorization\b/g, 'authorization'),
-      key,
-      value: escapeHTMLIfNeeded(value),
-      parentAppIcon: appIconToUse, // Include parent app icon in the response
-    });
-  };
-
-  // Update the filterTags function with proper type checking
-  const filterTags = (
-    tagsToFilter: Record<string, unknown> | unknown[],
-    termToSearch: string,
-    pathPrefix: string,
-  ): Record<string, unknown> | unknown[] => {
-    if (!termToSearch) return tagsToFilter;
-
-    // Handle arrays
-    if (Array.isArray(tagsToFilter)) {
-      const filteredArray = tagsToFilter.filter((item, index) => {
-        const currentPath = pathPrefix
-          ? `${pathPrefix}[${index}]`
-          : `[${index}]`;
-
-        // Check if this item matches the search
-        if (
-          typeof item === 'string' &&
-          item.toLowerCase().includes(termToSearch.toLowerCase())
-        ) {
-          return true;
-        }
-
-        // Check if this is an object that matches
-        if (typeof item === 'object' && item !== null) {
-          const filteredItem = filterTags(
-            item as Record<string, unknown>,
-            termToSearch,
-            currentPath,
-          );
-          return (
-            (typeof filteredItem === 'object' &&
-              Object.keys(filteredItem as Record<string, unknown>).length >
-                0) ||
-            outputMatchesSearch(item, termToSearch)
-          );
-        }
-
-        return false;
-      });
-
-      return filteredArray.length > 0 ? arrayToObject(filteredArray) : {};
-    }
-
-    const filteredTags: Record<string, unknown> = {};
-    const lowerTerm = termToSearch.toLowerCase();
-
-    Object.entries(tagsToFilter).forEach(([key, value]) => {
-      const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
-
-      // Check if this node matches the search
-      const nodeMatches = nodeMatchesSearch(key, value, lowerTerm);
-
-      // Check if output matches the search
-      const outputMatches =
-        isTagNode(value) &&
-        value.output &&
-        outputMatchesSearch(value.output, lowerTerm);
-
-      // Check if children match the search
-      let filteredChildren: Record<string, unknown> = {};
-
-      // Handle array in output
-      if (isTagNode(value) && value.output && Array.isArray(value.output)) {
-        const filteredOutput = filterTags(
-          value.output,
-          termToSearch,
-          `${currentPath}.output`,
-        );
-        const outputMatch =
-          typeof filteredOutput === 'object' &&
-          Object.keys(filteredOutput as Record<string, unknown>).length > 0;
-        if (outputMatch) {
-          const clonedNode = { ...value };
-          clonedNode.output = value.output; // Keep original array for proper rendering
-          filteredTags[key] = clonedNode;
-          return;
-        }
-      }
-
-      // Handle regular tags
-      if (isTagNode(value) && value.tags) {
-        filteredChildren = filterTags(
-          value.tags,
-          termToSearch,
-          currentPath,
-        ) as Record<string, unknown>;
-      }
-
-      const childrenMatch =
-        typeof filteredChildren === 'object' &&
-        Object.keys(filteredChildren).length > 0;
-
-      // Include this node if it matches or has matching children
-      if (nodeMatches || outputMatches || childrenMatch) {
-        // Clone the node to avoid modifying the original
-        const clonedNode = isTagNode(value) ? { ...value } : value;
-
-        // If children match, include the filtered children
-        if (childrenMatch && isTagNode(clonedNode)) {
-          clonedNode.tags = filteredChildren as Record<string, TagNode>;
-        }
-
-        filteredTags[key] = clonedNode;
-      }
-    });
-
-    return filteredTags;
-  };
-
-  // Only filter if in global search mode, otherwise show all
-  const filteredTags = globalSearchMode
-    ? filterTags(processedTags, searchTerm, path)
-    : processedTags;
-
-  // Simplified rendering to fix syntax issues
-  return html`
-    <ul style="padding-left: ${1 * 20}px;">
-      ${Object.entries(filteredTags as Record<string, unknown>).map(
-        ([key, value]) => {
-          const isStep = isTagNode(value);
-          // We don't use isOutput but keep it for future reference
-          const isArrayItem = key.startsWith('[') && key.endsWith(']');
-          const hasNestedSteps =
-            isStep &&
-            isTagNode(value) &&
-            value.tags &&
-            Object.keys(value.tags).length > 0;
-          const hasOutput =
-            isTagNode(value) &&
-            value.output &&
-            typeof value.output === 'object';
-          // Determine if this item has children that can be expanded
-          let hasChildren = hasNestedSteps || hasOutput;
-
-          // Check if this is an array or object (even if it's inside a step's output)
-          // This will allow us to show expand/collapse icons for arrays and objects
-          const isArray = Array.isArray(value);
-          const isObject =
-            !isArray &&
-            typeof value === 'object' &&
-            value !== null &&
-            Object.keys(value as Record<string, unknown>).length > 0;
-
-          // If this is an array or object (not a step), mark it as having children
-          if (!isStep && (isArray || isObject)) {
-            hasChildren = true;
-          }
-
-          // If this is a step with output that is an array or object, also mark it as having children
-          if (isStep && isTagNode(value) && value.output) {
-            // The output could be any data type - check if it's an array or object with content
-            const outputIsArray =
-              Array.isArray(value.output) && value.output.length > 0;
-            const outputIsObject =
-              !outputIsArray &&
-              typeof value.output === 'object' &&
-              value.output !== null &&
-              Object.keys(value.output as Record<string, unknown>).length > 0;
-
-            if (outputIsArray || outputIsObject) {
-              hasChildren = true;
-            }
-          }
-          const isExpanded = expandedNodes[key];
-          const isOutputExpanded = expandedOutputs[key];
-          let currentPath: string;
-          if (path) {
-            if (key.startsWith('[') && key.endsWith(']')) {
-              currentPath = `${path}${key}`;
-            } else {
-              currentPath = `${path}.${key}`;
-            }
-          } else {
-            currentPath = key;
-          }
-          const nodeMatches =
-            searchTerm && nodeMatchesSearch(key, value, searchTerm);
-          let text: string;
-
-          if (isArrayItem) {
-            text = key;
-          } else if (isTagNode(value) && value.name) {
-            text = value.name;
-          } else {
-            text = key;
-          }
-
-          let tagsParam: unknown = {};
-
-          if (isTagNode(value)) {
-            // If the output exists, use it directly regardless of its type
-            if (value.output !== undefined) {
-              tagsParam = value.output;
-            }
-          }
-
-          let tagsParamForOutput: unknown;
-
-          if (Array.isArray(value)) {
-            tagsParamForOutput = value;
-          } else if (isTagNode(value) && value.tags) {
-            tagsParamForOutput = value.tags;
-          } else {
-            tagsParamForOutput = value as Record<string, unknown>;
-          }
-
-          // Determine the app icon to pass down - use current node's icon or parent's icon
-          const currentNodeAppIcon = isTagNode(value)
-            ? value.appIcon
-            : undefined;
-          const appIconToPass = currentNodeAppIcon || parentAppIcon;
-          const childIgnoreParentKey =
-            ignoreParentKey || (isTagNode(value) && value.ignoreParentKey === true);
-
-          const handleMenuRowClcik = (e: Event) => {
-            if (isStep && hasOutput) {
-              // For step nodes with output, toggle output expansion
-              setExpandedOutputs((prev) => ({
-                ...prev,
-                [key]: !prev[key],
-              }));
-            } else if (hasChildren) {
-              // For array/object nodes, toggle node expansion
-              toggleExpand(key);
-              toggleOutputExpand(key, e);
-            } else {
-              // For leaf nodes, select the value
-              handleSelectTag(
-                key,
-                value,
-                currentPath,
-                currentNodeAppIcon,
-                childIgnoreParentKey,
-              );
-            }
-          };
-
-          // Check if this is an edge node (leaf node with no children)
-          const isEdgeNode = !hasChildren;
-
-          // Determine if we should show the add tag button
-          // Don't show for step name nodes, only for non-edge nodes that aren't step names
-          const shouldShowAddButton =
-            !isEdgeNode && hoveredNode === key && !isStep;
-
-          return html`
-            <li key=${key} class="${nodeMatches ? styles.searchMatch : ''}">
-              <div
-                onClick=${(e: Event) => {
-                  if (isStep && hasOutput) {
-                    // For step nodes with output, toggle output expansion
-                    setExpandedOutputs((prev) => ({
-                      ...prev,
-                      [key]: !prev[key],
-                    }));
-                  } else if (hasChildren) {
-                    // For array/object nodes, toggle node expansion
-                    toggleExpand(key);
-                    toggleOutputExpand(key, e);
-                  } else {
-                    // For leaf nodes, select the value
-                    handleSelectTag(
-                      key,
-                      value,
-                      currentPath,
-                      currentNodeAppIcon,
-                      childIgnoreParentKey,
-                    );
-                  }
-                }}
-                class="${styles.listItemContent}"
-                onMouseEnter=${() => setHoveredNode(key)}
-                onMouseLeave=${() => setHoveredNode(null)}
-              >
-                ${!isStep ? html`<${TypeIcon} value=${value} />` : ''}
-                ${isTagNode(value) && value.appIcon
-                  ? html`<img src=${value.appIcon} alt="App Icon" />`
-                  : ''}
-
-                <span
-                  class="${styles.key}"
-                  dangerouslySetInnerHTML=${{
-                    __html: highlightSearchTerm(text, searchTerm),
-                  }}
-                ></span>
-
-                ${!hasChildren &&
-                value !== undefined &&
-                (typeof value === 'string' ||
-                  typeof value === 'number' ||
-                  typeof value === 'boolean')
-                  ? html`<${Hint}
-                      dismissOnClick=${false}
-                      position="top"
-                      deltaY=${0}
-                      className=${styles.hint}
-                      ><span class="${styles.value}">
-                        ${value ? ' ' : ''}
-                        <span
-                          data-hint=${value ? String(value) : ''}
-                          dangerouslySetInnerHTML=${{
-                            __html: highlightSearchTerm(
-                              String(value),
-                              searchTerm,
-                            ),
-                          }}
-                        ></span> </span
-                    ><//>`
-                  : ''}
-                ${isStep &&
-                value !== undefined &&
-                isTagNode(value) &&
-                value.machineName
-                  ? html`<span class="${styles.value}">
-                      ${' '}
-                      <span
-                        dangerouslySetInnerHTML=${{
-                          __html: highlightSearchTerm(
-                            value.machineName,
-                            searchTerm,
-                          ),
-                        }}
-                      ></span>
-                    </span>`
-                  : ''}
-                ${isArrayItem && typeof value === 'object' && !isStep
-                  ? html`<span class="${styles.value}">
-                      ${' '}
-                      <span>
-                        ${Array.isArray(value)
-                          ? `Array(${value.length})`
-                          : `Object${
-                              value && typeof value === 'object'
-                                ? ` (${
-                                    Object.keys(
-                                      value as Record<string, unknown>,
-                                    ).length
-                                  } keys)`
-                                : ''
-                            }`}
-                      </span>
-                    </span>`
-                  : ''}
-
-                <!-- Add Tag button for non-edge nodes that aren't step names -->
-                ${shouldShowAddButton
-                  ? html`
-                      <button
-                        class="${styles.addTagButton}"
-                        onClick=${(e: Event) => {
-                          e.stopPropagation();
-                          handleSelectTag(
-                            key,
-                            value,
-                            currentPath,
-                            currentNodeAppIcon,
-                            childIgnoreParentKey,
-                          );
-                        }}
-                        title="Add this tag"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        >
-                          <path d="M12 5v14"></path>
-                          <path d="M5 12h14"></path>
-                        </svg>
-                      </button>
-                    `
-                  : ''}
-
-                <!-- Expand/collapse icon for arrays -->
-                ${Array.isArray(value) && value.length > 0
-                  ? html`<span
-                      class="${styles.outputIndicator} ${styles.objectExpandIcon}"
-                      onClick=${(e: Event) => handleMenuRowClcik(e)}
-                      title="Toggle expand output"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        style="transform: ${isOutputExpanded
-                          ? 'rotate(180deg)'
-                          : 'rotate(0deg)'}; 
-                       transition: transform 0.2s;"
-                      >
-                        <path d="m6 9 6 6 6-6"></path>
-                      </svg>
-                    </span>`
-                  : ''}
-
-                <!-- Expand/collapse icon for objects -->
-                ${!isStep &&
-                !Array.isArray(value) &&
-                typeof value === 'object' &&
-                value !== null &&
-                Object.keys(value as Record<string, unknown>).length > 0
-                  ? html`<span
-                      class="${styles.outputIndicator} ${styles.objectExpandIcon}"
-                      onClick=${(e: Event) => {
-                        handleMenuRowClcik(e);
-                      }}
-                      title="Toggle expand output"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        style="transform: ${isOutputExpanded
-                          ? 'rotate(180deg)'
-                          : 'rotate(0deg)'}; 
-                       transition: transform 0.2s;"
-                      >
-                        <path d="m6 9 6 6 6-6"></path>
-                      </svg>
-                    </span>`
-                  : ''}
-
-                <!-- Expand/collapse icon for step output that contains arrays or objects -->
-                ${isStep &&
-                isTagNode(value) &&
-                value.output &&
-                ((Array.isArray(value.output) && value.output.length > 0) ||
-                  (!Array.isArray(value.output) &&
-                    typeof value.output === 'object' &&
-                    value.output !== null &&
-                    Object.keys(value.output as Record<string, unknown>)
-                      .length > 0))
-                  ? html`<span
-                      class="${styles.outputIndicator} ${styles.objectExpandIcon}"
-                      onClick=${(e: Event) => toggleOutputExpand(key, e)}
-                      title="Toggle expand output"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        style="transform: ${isOutputExpanded
-                          ? 'rotate(180deg)'
-                          : 'rotate(0deg)'}; 
-                           transition: transform 0.2s;"
-                      >
-                        <path d="m6 9 6 6 6-6"></path>
-                      </svg>
-                    </span>`
-                  : ''}
-              </div>
-
-              ${isStep && hasOutput && isOutputExpanded
-                ? html`<div class="${styles.outputSection}">
-                    <div style="position: relative;">
-                      <!-- SPECIAL CASE: Force array handling -->
-                      ${(() => {
-                        // For arrays specifically, render them directly
-                        if (Array.isArray(tagsParam)) {
-                          // Create a wrapper div to show each array item
-                          return html`
-                            <div class="${styles.arrayOutput}">
-                              <ul>
-                                ${tagsParam.map(
-                                  (item, index) => html`
-                                    <li key=${index}>
-                                      <div class="${styles.listItemContent}">
-                                        <span class="${styles.key}"
-                                          >[${index}]</span
-                                        >
-                                        ${typeof item === 'object' &&
-                                        item !== null
-                                          ? html`
-                                              <span class="${styles.value}">
-                                                ${Array.isArray(item)
-                                                  ? `Array(${item.length})`
-                                                  : `Object(${
-                                                      Object.keys(
-                                                        item as Record<
-                                                          string,
-                                                          unknown
-                                                        >,
-                                                      ).length
-                                                    } keys)`}
-                                              </span>
-                                              <span
-                                                class="${styles.outputIndicator} ${styles.objectExpandIcon}"
-                                                onClick=${(e: Event) =>
-                                                  toggleOutputExpand(key, e)}
-                                                title="Toggle expand output"
-                                              >
-                                                <svg
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                  width="24"
-                                                  height="24"
-                                                  viewBox="0 0 24 24"
-                                                  fill="none"
-                                                  stroke="currentColor"
-                                                  strokeWidth="2"
-                                                  strokeLinecap="round"
-                                                  strokeLinejoin="round"
-                                                  style="transform: ${isOutputExpanded
-                                                    ? 'rotate(180deg)'
-                                                    : 'rotate(0deg)'}; 
-                           transition: transform 0.2s;"
-                                                >
-                                                  <path d="m6 9 6 6 6-6"></path>
-                                                </svg>
-                                              </span>
-                                            `
-                                          : html`
-                                              <span class="${styles.value}">
-                                                ${String(item)}
-                                              </span>
-                                            `}
-                                      </div>
-                                    </li>
-                                  `,
-                                )}
-                              </ul>
-                            </div>
-                          `;
-                        }
-
-                        // For objects, render keys and values
-                        if (
-                          typeof tagsParam === 'object' &&
-                          tagsParam !== null
-                        ) {
-                          return html`
-                            <${TagList}
-                              tags=${tagsParam as Record<string, unknown>}
-                              searchTerm=${searchTerm}
-                              level=${level + 1}
-                              path=${`${currentPath}.output`}
-                              globalSearchMode=${globalSearchMode}
-                              onSelect=${onSelect}
-                              activeTab=${activeTab}
-                              parentAppIcon=${appIconToPass}
-                              ignoreParentKey=${childIgnoreParentKey}
-                            />
-                          `;
-                        }
-
-                        // For primitive values, just show the string representation
-                        return html`
-                          <div style="padding: 4px; color: #666;">
-                            ${String(tagsParam)}
-                          </div>
-                        `;
-                      })()}
-                    </div>
-                  </div>`
-                : ''}
-              ${hasNestedSteps && isExpanded
-                ? html`<${TagList}
-                    tags=${isTagNode(value) ? value.tags || {} : {}}
-                    searchTerm=${searchTerm}
-                    level=${level + 1}
-                    path=${currentPath}
-                    globalSearchMode=${globalSearchMode}
-                    onSelect=${onSelect}
-                    activeTab=${activeTab}
-                    parentAppIcon=${appIconToPass}
-                    ignoreParentKey=${value.ignoreParentKey || ignoreParentKey}
-                  />`
-                : ''}
-              <!-- Display expanded array content with additional debug info -->
-              ${Array.isArray(value) && value.length > 0 && isExpanded
-                ? html`<div class="${styles.outputSection}">
-                    <${TagList}
-                      tags=${value}
-                      searchTerm=${searchTerm}
-                      level=${level + 1}
-                      path=${currentPath}
-                      globalSearchMode=${globalSearchMode}
-                      onSelect=${onSelect}
-                      activeTab=${activeTab}
-                      parentAppIcon=${appIconToPass}
-                      ignoreParentKey=${childIgnoreParentKey}
-                    />
-                  </div>`
-                : ''}
-
-              <!-- Display expanded object content with additional debug info -->
-              ${!isStep &&
-              !Array.isArray(value) &&
-              typeof value === 'object' &&
-              value !== null &&
-              Object.keys(value as Record<string, unknown>).length > 0 &&
-              isExpanded
-                ? html`<div class="${styles.outputSection}">
-                    <${TagList}
-                      tags=${value as Record<string, unknown>}
-                      searchTerm=${searchTerm}
-                      level=${level + 1}
-                      path=${currentPath}
-                      globalSearchMode=${globalSearchMode}
-                      onSelect=${onSelect}
-                      activeTab=${activeTab}
-                      parentAppIcon=${appIconToPass}
-                      ignoreParentKey=${childIgnoreParentKey}
-                    />
-                  </div>`
-                : ''}
-            </li>
-          `;
-        },
-      )}
-    </ul>
-  `;
-};
-
-// Update the TabMenu component to search across all tabs and pass data to TagList
-const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
-  const [activeTab, setActiveTab] = useState<string>(Object.keys(data)[0]);
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const [searchResults, setSearchResults] = useState<Record<string, number>>(
-    {},
-  );
-  const [globalSearchMode, setGlobalSearchMode] = useState<boolean>(false);
-
-  // Search across all tabs and count matches
-  useEffect(() => {
-    if (!searchTerm) {
-      setSearchResults({});
-      setGlobalSearchMode(false);
-      return;
-    }
-
-    const results: Record<string, number> = {};
-
-    Object.keys(data).forEach((tabKey) => {
-      // Skip counting for Values tab - handle it differently
-      if (tabKey === 'Values') {
-        const valuesData = (data[tabKey] as unknown) as { values: ValueItem[] };
-        if (valuesData.values) {
-          const matches = valuesData.values.filter((item) =>
-            item.value.toLowerCase().includes(searchTerm.toLowerCase()),
-          ).length;
-          results[tabKey] = matches;
-        }
-        return;
-      }
-
-      const matches = countSearchMatches(
-        data[tabKey].tags || {},
-        searchTerm.toLowerCase(),
-      );
-      results[tabKey] = matches;
-    });
-
-    setSearchResults(results);
-    setGlobalSearchMode(searchTerm.length > 0);
-  }, [searchTerm, data]);
-
-  const getTabIcon = (tabName: string) => {
-    const name = tabName.toLowerCase();
-
-    if (name === 'values') {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="mr-1"
-        >
-          <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
-          <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
-          <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
-          <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
-          <rect width="10" height="10" x="7" y="7" rx="2"></rect>
-        </svg>
-      `;
-    }
-
-    if (name.includes('trigger')) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="mr-1"
-        >
-          <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"></path>
-        </svg>
-      `;
-    }
-
-    if (name.includes('storage') || name.includes('variable')) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="mr-1"
-        >
-          <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
-          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
-          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
-        </svg>
-      `;
-    }
-
-    if (name.includes('form') || name.includes('setup')) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="mr-1"
-        >
-          <rect width="18" height="18" x="3" y="3" rx="2"></rect>
-          <path d="M9 9h6"></path>
-          <path d="M9 13h6"></path>
-          <path d="M9 17h6"></path>
-        </svg>
-      `;
-    }
-
-    if (name.includes('auth') || name.includes('authorization')) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          class="mr-1"
-        >
-          <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
-          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-          <path d="M12 16v3"></path>
-        </svg>
-      `;
-    }
-
-    if (name.includes('parameter')) {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-variable"
-        >
-          <path d="M8 21s-4-3-4-9 4-9 4-9" />
-          <path d="M16 3s4 3 4 9-4 9-4 9" />
-          <line x1="15" x2="9" y1="9" y2="15" />
-          <line x1="9" x2="15" y1="9" y2="15" />
-        </svg>
-      `;
-    }
-
-    // Default icon
-    return html`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        class="mr-1"
-      >
-        <path
-          d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
-        ></path>
-      </svg>
-    `;
-  };
-
-  const renderTabs = () =>
-    html`
-      <div class="${styles.tabsWrapper}">
-        ${Object.keys(data).map(
-          (key) => html`
-            <div
-              class="${styles.tab} ${activeTab === key
-                ? styles.activeTab
-                : ''} ${searchResults[key] > 0 ? styles.tabWithResults : ''}"
-              onClick=${() => setActiveTab(key)}
-            >
-              ${getTabIcon(data[key].name || key)} ${data[key].name || key}
-              ${searchResults[key] > 0
-                ? html`<span class="${styles.resultBadge}"
-                    >${searchResults[key]}</span
-                  >`
-                : ''}
-            </div>
-          `,
-        )}
-      </div>
-    `;
-
-  const renderContent = () => {
-    // Special handling for Values tab
-    if (activeTab === 'Values') {
-      const valuesData = (data[activeTab] as unknown) as {
-        values: ValueItem[];
-      };
-      const filteredValues = searchTerm
-        ? valuesData.values.filter((item) =>
-            item.value.toLowerCase().includes(searchTerm.toLowerCase()),
-          )
-        : valuesData.values;
-
-      return html`
-        <div class="${styles.tabContent}">
-          <div class="${styles.searchWrapper}">
-            <input
-              type="text"
-              placeholder="Search values..."
-              value=${searchTerm}
-              onInput=${(e: Event) =>
-                setSearchTerm((e.target as HTMLInputElement).value)}
-            />
-            ${searchTerm
-              ? html`
-                  <button
-                    class="${styles.clearSearch}"
-                    onClick=${() => setSearchTerm('')}
-                    title="Clear search"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <line x1="18" y1="6" x2="6" y2="18"></line>
-                      <line x1="6" y1="6" x2="18" y2="18"></line>
-                    </svg>
-                  </button>
-                `
-              : ''}
-          </div>
-          <div class="${styles.tagsListWrapper}">
-            <${ValuesList}
-              values=${filteredValues}
-              onSelect=${onSelect}
-              onOptionClick=${onOptionClick}
-            />
-          </div>
-        </div>
-      `;
-    }
-
-    // Regular tab handling
-    const activeData = data[activeTab];
-    const steps = activeData.tags || [];
-    const hasSingleEmptyStep =
-      !Array.isArray(steps) && // Handle the case where steps is an object
-      Object.keys(steps).length === 1 &&
-      isTagNode(Object.values(steps)[0]) &&
-      Object.keys((Object.values(steps)[0] as TagNode).output || {}).length ===
-        0;
-    return html`
-      <div class="${styles.tabContent}">
-        <div class="${styles.searchWrapper}">
-          <input
-            type="text"
-            placeholder="Search across all steps and fields..."
-            value=${searchTerm}
-            onInput=${(e: Event) =>
-              setSearchTerm((e.target as HTMLInputElement).value)}
-          />
-          ${searchTerm
-            ? html`
-                <button
-                  class="${styles.clearSearch}"
-                  onClick=${() => setSearchTerm('')}
-                  title="Clear search"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                  </svg>
-                </button>
-              `
-            : ''}
-        </div>
-        ${hasSingleEmptyStep
-          ? html`<div class="${styles.emptyStep}">
-              <span>No tags found</span>
-            </div>`
-          : html` <div class="${styles.tagsListWrapper}">
-              <${TagList}
-                tags=${activeData.tags}
-                searchTerm=${searchTerm}
-                globalSearchMode=${globalSearchMode}
-                onSelect=${onSelect}
-                activeTab=${data[activeTab].machineName || activeTab}
-                parentAppIcon=${isTagNode(activeData)
-                  ? activeData.appIcon
-                  : undefined}
-                ignoreParentKey=${false}
-              />
-            </div>`}
-      </div>
-    `;
-  };
-
-  return html`<div>${renderTabs()} ${renderContent()}</div>`;
-};
-
-// Function to convert TagData to include the Values tab
-function convertTagsToObject(tagData: Record<string, unknown>): TagData {
-  const result: TagData = {};
-
-  Object.keys(tagData).forEach((key) => {
-    const section = tagData[key] as TagNode;
-    const newSection: TagNode = {
-      ...section,
-    };
-
-    // Convert tags array to object if needed
-    if (section.tags && Array.isArray(section.tags)) {
-      const tagsObject: Record<string, TagNode> = {};
-
-      section.tags.forEach((tag: TagNode, index: number) => {
-        // Use machineName as key if available, otherwise use index
-        const tagKey = tag.machineName || `[${index}]`;
-
-        // Recursively convert nested tags
-        if (tag.tags && Array.isArray(tag.tags)) {
-          tagsObject[tagKey] = {
-            ...tag,
-            tags: convertNestedTagsToObject(tag.tags),
-          };
-        } else {
-          tagsObject[tagKey] = tag;
-        }
-      });
-
-      newSection.tags = tagsObject;
-    }
-
-    result[key] = newSection;
-  });
-
-  return result;
-}
-
-// Update the TagsMenu function to add the Values tab
-export function TagsMenu({
-  tagsTree,
-  onSelect,
-  renderValuesTab,
-  options,
-  onOptionClick,
-}: TagsMenuProps) {
-  let modifiedData = convertTagsToObject(tagsTree);
-
-  if (
-    renderValuesTab &&
-    options &&
-    Array.isArray(options) &&
-    options.length > 0
-  ) {
-    // Add the Values tab with sample data
-    // In a real implementation, this would come from props
-    modifiedData = {
-      Values: {
-        name: 'Values',
-        machineName: 'values',
-        values: options,
-      } as TagNode,
-      ...modifiedData, // Spread the remaining tabs after "Values"
-    };
-  }
-  return html`
-    <div class="${styles.tagsMenuWrapper}">
-      <${TabMenu}
-        data=${modifiedData}
-        onSelect=${onSelect}
-        onOptionClick=${onOptionClick}
-      />
-    </div>
-  `;
-}