fix(editor,credential-group): mask secrets outside short-input and stop a per-option abort from failing a shared query

config.password only reached the short-input renderer, so eight credential
fields rendered in plaintext: private keys on ssh/sftp/pi/kalshi, the
Secrets Manager payload, the STS web-identity and SAML assertions, and the
Browser Use variables table. long-input, code, and table now honor the flag.
Code fields mask through the highlighter because react-simple-code-editor
paints its textarea transparent; the table masks every column but the first
so key/value rows stay distinguishable. A registry-walking audit test fails
both on a password flag sitting on a type that cannot honor it and on any of
the eight fields losing its flag.

credential-group threaded a per-option AbortSignal into the fetch registered
under the workspace-wide credential group list key, so closing one option
panel rejected every co-observer with an AbortError that is not a React
Query cancellation. The shared fetch now runs on its own lifecycle signal.

Author: waleedlatif1

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

@@ -0,0 +1,223 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+/** jsdom ships no ResizeObserver; the editor observes its container to size the gutter. */
+globalThis.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+} as unknown as typeof ResizeObserver
+
+const { SECRET } = vi.hoisted(() => ({
+  SECRET: '-----BEGIN OPENSSH PRIVATE KEY-----\nb3BlbnNzaC1rZXktdjE\n-----END-----',
+}))
+
+vi.mock('@sim/emcn', () => ({
+  CODE_LINE_HEIGHT_PX: 21,
+  Code: {
+    Container: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    Gutter: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    Content: ({
+      children,
+      editorRef,
+    }: {
+      children: ReactNode
+      editorRef?: React.RefObject<HTMLDivElement | null>
+    }) => <div ref={editorRef}>{children}</div>,
+    Placeholder: ({ children, show }: { children: ReactNode; show: boolean }) =>
+      show ? <div>{children}</div> : null,
+  },
+  calculateGutterWidth: () => 24,
+  cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+  Duplicate: () => null,
+  getCodeEditorProps: () => ({}),
+  highlight: (code: string) => code,
+  languages: { javascript: {}, python: {}, bash: {} },
+}))
+
+vi.mock('@sim/emcn/icons', () => ({
+  Check: () => null,
+  Wand: () => null,
+}))
+
+vi.mock('react-simple-code-editor', () => ({
+  default: ({
+    value,
+    highlight,
+    onFocus,
+    onBlur,
+  }: {
+    value: string
+    highlight: (code: string) => string
+    onFocus: () => void
+    onBlur: () => void
+  }) => (
+    <>
+      <textarea
+        data-testid='code-textarea'
+        value={value}
+        readOnly
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+      <pre data-testid='code-highlight' dangerouslySetInnerHTML={{ __html: highlight(value) }} />
+    </>
+  ),
+}))
+
+vi.mock('@/components/ui/button', () => ({
+  Button: ({ children }: { children?: ReactNode }) => <button type='button'>{children}</button>,
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ workspaceId: 'workspace-1' }),
+}))
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown',
+  () => ({
+    EnvVarDropdown: () => null,
+    checkEnvVarTrigger: () => ({ show: false, searchTerm: '' }),
+  })
+)
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown',
+  () => ({
+    TagDropdown: () => null,
+    checkTagTrigger: () => ({ show: false }),
+  })
+)
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value',
+  () => ({
+    useSubBlockValue: (_blockId: string, subBlockId: string) => [
+      subBlockId === 'privateKey' ? SECRET : undefined,
+      () => {},
+    ],
+  })
+)
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider',
+  () => ({ useActiveSearchTarget: () => null })
+)
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar',
+  () => ({
+    WandPromptBar: () => null,
+  })
+)
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes',
+  () => ({ useAccessibleReferencePrefixes: () => undefined })
+)
+
+vi.mock('@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand', () => ({
+  useWand: () => ({
+    isLoading: false,
+    isStreaming: false,
+    isPromptVisible: false,
+    promptInputValue: '',
+    generateStream: () => {},
+    cancelGeneration: () => {},
+    showPromptInline: () => {},
+    hidePromptInline: () => {},
+    updatePromptValue: () => {},
+  }),
+}))
+
+vi.mock('@/hooks/kb/use-tag-selection', () => ({ useTagSelection: () => () => {} }))
+
+vi.mock('@/hooks/use-available-env-vars', () => ({
+  useAvailableEnvVarKeys: () => [],
+  createShouldHighlightEnvVar: () => () => false,
+}))
+
+vi.mock('@/hooks/use-code-undo-redo', () => ({
+  useCodeUndoRedo: () => ({
+    recordChange: () => {},
+    recordReplace: () => {},
+    flushPending: () => {},
+    startSession: () => {},
+    undo: () => {},
+    redo: () => {},
+  }),
+}))
+
+vi.mock('@/stores/workflows/workflow/store', () => ({
+  useWorkflowStore: (selector: (state: { blocks: Record<string, unknown> }) => unknown) =>
+    selector({ blocks: {} }),
+}))
+
+import { Code } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+function mount(password: boolean) {
+  act(() => {
+    root.render(
+      <Code
+        blockId='block-1'
+        subBlockId='privateKey'
+        password={password}
+        wandConfig={{ enabled: false, prompt: '' }}
+      />
+    )
+  })
+}
+
+const highlighted = () => container.querySelector('[data-testid="code-highlight"]')?.innerHTML ?? ''
+
+describe('Code password masking', () => {
+  it('conceals the editor contents while unfocused', () => {
+    mount(true)
+
+    expect(highlighted()).not.toContain('BEGIN OPENSSH PRIVATE KEY')
+    expect(highlighted()).not.toContain('b3BlbnNzaC1rZXktdjE')
+    expect(highlighted()).toContain('•')
+  })
+
+  it('reveals the contents once the editor takes focus and re-masks on blur', () => {
+    mount(true)
+
+    const textarea = container.querySelector('[data-testid="code-textarea"]') as HTMLTextAreaElement
+    act(() => {
+      textarea.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+    })
+    expect(highlighted()).toContain('BEGIN OPENSSH PRIVATE KEY')
+
+    act(() => {
+      textarea.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
+    })
+    expect(highlighted()).not.toContain('BEGIN OPENSSH PRIVATE KEY')
+  })
+
+  it('leaves a non-password code field in plaintext', () => {
+    mount(false)
+
+    expect(highlighted()).toContain('BEGIN OPENSSH PRIVATE KEY')
+    expect(highlighted()).not.toContain('•')
+  })
+})

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

@@ -30,6 +30,7 @@ import {
   getValidWorkflowSearchRange,
   type WorkflowSearchTextHighlight,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { maskSecretText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/password-mask'
 import {
   checkTagTrigger,
   TagDropdown,
@@ -137,6 +138,21 @@ const escapeHtml = (value: string): string =>
     .replaceAll('"', '"')
     .replaceAll("'", ''')
 
+/**
+ * Highlighter that conceals the editor's contents.
+ *
+ * @remarks
+ * `react-simple-code-editor` paints its textarea with a transparent text fill
+ * and shows the markup returned by its `highlight` prop instead, so swapping the
+ * highlighter is what actually hides a secret — the textarea's own value is
+ * never visible.
+ *
+ * @param codeToHighlight - The plaintext editor contents
+ * @returns Escaped markup with every character replaced by a mask glyph
+ */
+export const highlightMaskedCode = (codeToHighlight: string): string =>
+  escapeHtml(maskSecretText(codeToHighlight))
+
 /**
  * Type definition for code placeholders during syntax highlighting.
  */
@@ -234,6 +250,8 @@ interface CodeProps {
   blockId: string
   subBlockId: string
   placeholder?: string
+  /** Whether to conceal the value until the editor is focused */
+  password?: boolean
   language?: 'javascript' | 'json' | 'python' | 'shell'
   generationType?: GenerationType
   value?: string
@@ -263,6 +281,7 @@ export const Code = memo(function Code({
   blockId,
   subBlockId,
   placeholder = 'Write JavaScript...',
+  password = false,
   language = 'javascript',
   generationType = 'javascript-function-body',
   value: propValue,
@@ -290,6 +309,7 @@ export const Code = memo(function Code({
   const [visualLineHeights, setVisualLineHeights] = useState<number[]>([])
   const [activeLineNumber, setActiveLineNumber] = useState(1)
   const [copied, setCopied] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
 
   const editorRef = useRef<HTMLDivElement>(null)
   const handleStreamStartRef = useRef<() => void>(() => {})
@@ -812,6 +832,7 @@ export const Code = memo(function Code({
   )
 
   const handleEditorFocus = useCallback(() => {
+    setIsFocused(true)
     startSession(codeRef.current)
     if (!isPreview && !disabled && !readOnly && codeRef.current.trim() === '') {
       setShowTags(true)
@@ -820,6 +841,7 @@ export const Code = memo(function Code({
   }, [disabled, isPreview, readOnly, startSession])
 
   const handleEditorBlur = useCallback(() => {
+    setIsFocused(false)
     flushPending()
   }, [flushPending])
 
@@ -942,7 +964,7 @@ export const Code = memo(function Code({
             onKeyDown={handleKeyDown}
             onFocus={handleEditorFocus}
             onBlur={handleEditorBlur}
-            highlight={highlightCode}
+            highlight={password && !isFocused ? highlightMaskedCode : highlightCode}
             {...getCodeEditorProps({ isStreaming: isAiStreaming, isPreview, disabled })}
           />
 

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

@@ -18,6 +18,7 @@ export { LongInput } from './long-input'
 export { McpDynamicArgs } from './mcp-dynamic-args'
 export { McpServerSelector, McpToolSelector } from './mcp-server-modal'
 export { MessagesInput } from './messages-input'
+export { maskSecretText, PASSWORD_MASKED_SUBBLOCK_TYPES } from './password-mask'
 export { ResponseFormat } from './response'
 export { ScheduleInfo } from './schedule-info'
 export { SelectorInput, type SelectorOverrides } from './selector-input'