improvement(emcn): promote ApiKeyReveal to SecretReveal in emcn

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -2,8 +2,13 @@
 
 import { createElement, useMemo, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { ArrowRight, ChevronDown, Expandable, ExpandableContent } from '@/components/emcn'
-import { ApiKeyReveal } from '@/components/ui'
+import {
+  ArrowRight,
+  ChevronDown,
+  Expandable,
+  ExpandableContent,
+  SecretReveal,
+} from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
@@ -620,7 +625,7 @@ function CredentialDisplay({ data }: { data: CredentialTagData }) {
   }
 
   if (data.type === 'sim_key') {
-    return <ApiKeyReveal value={data.value} redacted={data.redacted || !data.value} />
+    return <SecretReveal value={data.value} redacted={data.redacted || !data.value} />
   }
 
   return null

apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx

@@ -12,8 +12,8 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  SecretReveal,
 } from '@/components/emcn'
-import { ApiKeyReveal } from '@/components/ui'
 import { type ApiKey, useCreateApiKey } from '@/hooks/queries/api-keys'
 
 const logger = createLogger('CreateApiKeyModal')
@@ -214,7 +214,7 @@ export function CreateApiKeyModal({
               </span>
             </p>
 
-            {newKey && <ApiKeyReveal value={newKey.key} className='mt-2.5' />}
+            {newKey && <SecretReveal value={newKey.key} className='mt-2.5' />}
           </ModalBody>
         </ModalContent>
       </Modal>

apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx

@@ -13,9 +13,10 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  SecretReveal,
   // Switch,
 } from '@/components/emcn'
-import { ApiKeyReveal, Input } from '@/components/ui'
+import { Input } from '@/components/ui'
 // import { useMcpServers, useUpdateMcpServer } from '@/hooks/queries/mcp'
 import { CopilotKeySkeleton } from '@/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton'
 import {
@@ -322,7 +323,7 @@ export function Copilot() {
               </span>
             </p>
 
-            {newKey && <ApiKeyReveal value={newKey} className='mt-2.5' />}
+            {newKey && <SecretReveal value={newKey} className='mt-2.5' />}
           </ModalBody>
         </ModalContent>
       </Modal>

apps/sim/components/emcn/components/index.ts

@@ -126,6 +126,7 @@ export {
   SModalTrigger,
 } from './s-modal/s-modal'
 export { SecretInput, type SecretInputProps } from './secret-input/secret-input'
+export { SecretReveal, type SecretRevealProps } from './secret-reveal/secret-reveal'
 export { Skeleton } from './skeleton/skeleton'
 export { Slider, type SliderProps } from './slider/slider'
 export { Switch } from './switch/switch'

apps/sim/components/ui/api-key-reveal.tsx …mponents/secret-reveal/secret-reveal.tsxapps/sim/components/ui/api-key-reveal.tsx renamed to apps/sim/components/emcn/components/secret-reveal/secret-reveal.tsx apps/sim/components/ui/api-key-reveal.tsx renamed to apps/sim/components/emcn/components/secret-reveal/secret-reveal.tsx

@@ -1,3 +1,21 @@
+/**
+ * A read-only display for a one-time secret reveal: the value renders inside
+ * a bordered code box with a copy button, or as masked dots when redacted.
+ *
+ * @remarks
+ * Use for surfaces that show a freshly-generated credential (API key, signing
+ * secret, etc.) once and then need to fall back to a redacted state on
+ * subsequent renders. Pair with `redacted` (or simply omit `value`) to render
+ * the masked state without a copy affordance.
+ *
+ * @example
+ * ```tsx
+ * import { SecretReveal } from '@/components/emcn'
+ *
+ * <SecretReveal value={apiKey} />
+ * <SecretReveal redacted />
+ * ```
+ */
 'use client'
 
 import { Button, Check, Copy } from '@/components/emcn'
@@ -6,13 +24,15 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 
 const REDACTED_DOTS = '••••••••••••••••••••••••••••••••'
 
-interface ApiKeyRevealProps {
+export interface SecretRevealProps {
+  /** Secret value to display. When absent or `redacted` is true, renders masked dots. */
   value?: string
-  className?: string
+  /** Force the masked state even when `value` is provided. */
   redacted?: boolean
+  className?: string
 }
 
-export function ApiKeyReveal({ value, className, redacted = false }: ApiKeyRevealProps) {
+export function SecretReveal({ value, className, redacted = false }: SecretRevealProps) {
   const { copied, copy } = useCopyToClipboard()
   const isHidden = redacted || !value
 

apps/sim/components/ui/index.ts

@@ -1,4 +1,3 @@
-export { ApiKeyReveal } from './api-key-reveal'
 export { Button, buttonVariants } from './button'
 export { Input } from './input'
 export { Label } from './label'