improvement(function): secrets access dropdown

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -66,6 +66,8 @@ interface DropdownProps {
   dependsOn?: SubBlockConfig['dependsOn']
   /** Enable search input in dropdown */
   searchable?: boolean
+  /** Render option labels verbatim instead of lowercasing them */
+  preserveLabelCase?: boolean
 }
 
 /**
@@ -92,6 +94,7 @@ export const Dropdown = memo(function Dropdown({
   fetchOptionById,
   dependsOn,
   searchable = false,
+  preserveLabelCase = false,
 }: DropdownProps) {
   const activeSearchTarget = useActiveSearchTarget()
   const { isToolAllowed } = usePermissionConfig()
@@ -208,18 +211,19 @@ export const Dropdown = memo(function Dropdown({
   }, [subBlockId, blockConfig, allOptions, isToolAllowed])
 
   const comboboxOptions = useMemo((): ComboboxOption[] => {
+    const toLabel = (raw: string) => (preserveLabelCase ? raw : raw.toLowerCase())
     return allOptions.map((opt) => {
       if (typeof opt === 'string') {
-        return { label: opt.toLowerCase(), value: opt, hidden: deniedOperationIds.has(opt) }
+        return { label: toLabel(opt), value: opt, hidden: deniedOperationIds.has(opt) }
       }
       return {
-        label: opt.label.toLowerCase(),
+        label: toLabel(opt.label),
         value: opt.id,
         icon: 'icon' in opt ? opt.icon : undefined,
         hidden: opt.hidden || deniedOperationIds.has(opt.id),
       }
     })
-  }, [allOptions, deniedOperationIds])
+  }, [allOptions, deniedOperationIds, preserveLabelCase])
 
   const optionMap = useMemo(() => {
     return new Map(comboboxOptions.map((opt) => [opt.value, opt.label]))
@@ -370,7 +374,8 @@ export const Dropdown = memo(function Dropdown({
     return (
       <div className='flex items-center gap-1 overflow-hidden whitespace-nowrap'>
         {visibleValues.map((selectedValue: string, index) => {
-          const label = (optionMap.get(selectedValue) || selectedValue).toLowerCase()
+          const rawLabel = optionMap.get(selectedValue) || selectedValue
+          const label = preserveLabelCase ? rawLabel : rawLabel.toLowerCase()
           const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
             activeSearchTarget,
             blockId,
@@ -379,21 +384,29 @@ export const Dropdown = memo(function Dropdown({
             label,
           })
           return (
-            <ChipTag key={selectedValue} variant='mono' className='min-w-0 shrink'>
+            <ChipTag key={selectedValue} variant='field' className='min-w-0 shrink'>
               <span className='truncate'>
                 {formatDisplayText(label, { workflowSearchHighlight })}
               </span>
             </ChipTag>
           )
         })}
         {overflowCount > 0 && (
-          <ChipTag variant='mono' className='shrink-0'>
+          <ChipTag variant='field' className='shrink-0'>
             +{overflowCount}
           </ChipTag>
         )}
       </div>
     )
-  }, [activeSearchTarget, blockId, multiSelect, multiValues, optionMap, subBlockId])
+  }, [
+    activeSearchTarget,
+    blockId,
+    multiSelect,
+    multiValues,
+    optionMap,
+    preserveLabelCase,
+    subBlockId,
+  ])
 
   const singleSelectOverlay = useMemo(() => {
     if (multiSelect || !singleValue) return undefined

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

@@ -689,6 +689,7 @@ function SubBlockComponent({
               fetchOptionById={config.fetchOptionById}
               dependsOn={config.dependsOn}
               searchable={config.searchable}
+              preserveLabelCase={config.preserveLabelCase}
             />
           </div>
         )

apps/sim/blocks/blocks/function.ts

@@ -138,6 +138,9 @@ try {
       paramVisibility: 'user-only',
       multiSelect: true,
       searchable: true,
+      // Secret names are case-sensitive: the code references the exact name via
+      // `{{NAME}}`, so the picker must not lowercase what it shows.
+      preserveLabelCase: true,
       options: [],
       condition: { field: 'secretScope', value: 'selected' },
       placeholder: 'Select secrets this tool can read',

apps/sim/blocks/types.ts

@@ -437,6 +437,15 @@ export interface SubBlockConfig {
   rows?: number
   // Multi-select functionality
   multiSelect?: boolean
+  /**
+   * Dropdown-specific: render option labels verbatim instead of lowercasing them.
+   *
+   * The editor lowercases dropdown labels as a typographic convention, which
+   * suits authored operation names ("Send Message"). It corrupts labels that are
+   * case-sensitive identifiers the user must reproduce elsewhere — a workspace
+   * secret shown as `stripe_key` cannot be referenced as `{{stripe_key}}`.
+   */
+  preserveLabelCase?: boolean
   // Combobox specific: Enable search input in dropdown
   searchable?: boolean
   /** Dropdown-specific: include static options as Cmd K search entries that preset this subblock. */

apps/sim/lib/workflows/subblocks/options.ts

@@ -63,9 +63,12 @@ export async function fetchWorkspaceSecretNameOptions(): Promise<SubBlockOption[
   ])
 
   // Personal variables shadow workspace ones at execution, so both are offered
-  // under one de-duplicated list of names.
+  // under one de-duplicated list of names. `workspace.workspace` is already the
+  // flat name->value record (see `workspaceEnvironmentDataSchema`); reaching for
+  // a `.variables` sub-key under it yields undefined and silently drops every
+  // workspace secret from the picker.
   const names = new Set<string>([
-    ...Object.keys(workspace?.workspace?.variables ?? {}),
+    ...Object.keys(workspace?.workspace ?? {}),
     ...Object.keys(personal ?? {}),
   ])
   return [...names].sort().map((name) => ({ id: name, label: name }))

packages/emcn/src/components/chip-tag/chip-tag.tsx

@@ -12,7 +12,11 @@ import { cn } from '../../lib/cn'
  * Variants, theme-aware via workspace tokens:
  * - `mono` — borderless, sharing the {@link ChipSwitch} trough surface
  *   (`--surface-5` light / `--surface-4` dark) with strong `--text-primary` text
- *   for emphasis (e.g. a discount next to a primary CTA).
+ *   for emphasis (e.g. a discount next to a primary CTA). Because its fill *is*
+ *   the trough/field surface, it disappears on one — use `field` there.
+ * - `field` — `mono` with the fill stepped one level away from the form-field
+ *   surface (`--surface-6` light / `--surface-3` dark), so the pill stays legible
+ *   when it sits *on* a `--surface-5` input, combobox trigger, or tag container.
  * - `gray` — a light surface over a slightly darker inset ring with muted
  *   `--text-secondary` text for low-emphasis status labels.
  * - `solid` — a filled inverse tag: a dark neutral surface (`--text-secondary`)
@@ -31,6 +35,8 @@ const chipTagVariants = cva(
     variants: {
       variant: {
         mono: 'h-5 gap-[3px] px-1 bg-[var(--surface-5)] text-[var(--text-primary)] dark:bg-[var(--surface-4)]',
+        field:
+          'h-5 gap-[3px] px-1 bg-[var(--surface-6)] text-[var(--text-primary)] dark:bg-[var(--surface-3)]',
         gray: 'h-5 gap-[3px] px-1 bg-[var(--surface-5)] text-[var(--text-secondary)] shadow-[inset_0_0_0_1px_var(--border-1)]',
         solid: 'h-5 gap-[3px] px-1 bg-[var(--text-secondary)] text-[var(--text-inverse)]',
         invite: