feat(mothership): add secrets input in chat

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

@@ -1,7 +1,18 @@
 'use client'
 
 import { createElement, useMemo, useState } from 'react'
-import { ArrowRight, ChevronDown, cn, Expandable, ExpandableContent, SecretReveal } from '@sim/emcn'
+import {
+  ArrowRight,
+  Button,
+  ChevronDown,
+  cn,
+  Expandable,
+  ExpandableContent,
+  SecretInput,
+  SecretReveal,
+  Tooltip,
+  toast,
+} from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { canonicalWorkspaceFilePath } from '@/lib/copilot/vfs/path-utils'
 import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
@@ -10,6 +21,12 @@ import type {
   ChatMessageContext,
   MothershipResource,
 } from '@/app/workspace/[workspaceId]/home/types'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import {
+  usePersonalEnvironment,
+  useSavePersonalEnvironment,
+  useUpsertWorkspaceEnvironment,
+} from '@/hooks/queries/environment'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
@@ -42,15 +59,27 @@ export const CREDENTIAL_TAG_TYPES = [
   'sim_key',
   'credential_id',
   'link',
+  'secret_input',
 ] as const
 
 export type CredentialTagType = (typeof CREDENTIAL_TAG_TYPES)[number]
 
+export const SECRET_INPUT_SCOPES = ['personal', 'workspace'] as const
+
+export type SecretInputScope = (typeof SECRET_INPUT_SCOPES)[number]
+
 export interface CredentialTagData {
   value?: string
   type: CredentialTagType
   provider?: string
   redacted?: boolean
+  /**
+   * Env-var key name to save the pasted secret under (secret_input only),
+   * e.g. "OPENAI_API_KEY".
+   */
+  name?: string
+  /** Where a secret_input value is persisted. Defaults to "workspace". */
+  scope?: SecretInputScope
 }
 
 export interface MothershipErrorTagData {
@@ -149,6 +178,17 @@ function isCredentialTagData(value: unknown): value is CredentialTagData {
     return false
   }
   if (value.provider !== undefined && typeof value.provider !== 'string') return false
+  // secret_input is an empty input the user fills in — it carries a key name to
+  // save under, not a value.
+  if (value.type === 'secret_input') {
+    if (
+      value.scope !== undefined &&
+      !(SECRET_INPUT_SCOPES as readonly string[]).includes(value.scope as string)
+    ) {
+      return false
+    }
+    return typeof value.name === 'string' && value.name.trim().length > 0
+  }
   if (value.redacted === true) return value.value === undefined || typeof value.value === 'string'
   return typeof value.value === 'string'
 }
@@ -612,9 +652,108 @@ const LockIcon = (props: { className?: string }) => (
   </svg>
 )
 
+/**
+ * Inline "paste a secret" widget rendered for
+ * `<credential>{"type":"secret_input","name":"OPENAI_API_KEY"}</credential>`.
+ * Reuses the shared emcn SecretInput; the pasted value is saved straight to
+ * workspace (default) or personal environment variables under `name` and never
+ * flows back through the chat transcript.
+ */
+function SecretInputDisplay({ data }: { data: CredentialTagData }) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const secretName = (data.name ?? '').trim()
+  const scope: SecretInputScope = data.scope === 'personal' ? 'personal' : 'workspace'
+
+  const [value, setValue] = useState('')
+  const [saved, setSaved] = useState(false)
+
+  const upsertWorkspace = useUpsertWorkspaceEnvironment()
+  const savePersonal = useSavePersonalEnvironment()
+  const personalQuery = usePersonalEnvironment()
+  const personalEnv = personalQuery.data
+  const { canEdit } = useUserPermissionsContext()
+
+  // Setting a workspace var needs write/admin (same gate as the secrets manager);
+  // personal vars are the user's own, so any member may set them.
+  const canManage = scope === 'personal' || canEdit
+
+  const isSaving = upsertWorkspace.isPending || savePersonal.isPending
+  // Personal saves replace the whole map, so block until existing vars are loaded.
+  const personalReady = scope !== 'personal' || personalEnv !== undefined
+  const canSave =
+    canManage && secretName.length > 0 && value.trim().length > 0 && !isSaving && personalReady
+
+  const handleSave = async () => {
+    if (!canSave) return
+    try {
+      if (scope === 'personal') {
+        // The personal POST replaces the whole map, so re-read the latest vars
+        // right before merging — a stale snapshot would drop keys saved elsewhere.
+        const { data: latest } = await personalQuery.refetch()
+        const merged: Record<string, string> = {}
+        for (const [key, entry] of Object.entries(latest ?? personalEnv ?? {}))
+          merged[key] = entry.value
+        merged[secretName] = value
+        await savePersonal.mutateAsync({ variables: merged })
+      } else {
+        await upsertWorkspace.mutateAsync({ workspaceId, variables: { [secretName]: value } })
+      }
+      setValue('')
+      setSaved(true)
+      toast.success(`Saved ${secretName}`)
+    } catch {
+      toast.error(`Couldn't save ${secretName}. Please try again.`)
+    }
+  }
+
+  if (!secretName) return null
+  // Only confirm after the user saves via THIS widget. A fresh prompt always shows
+  // the input so the user can set or override the key, even if it already exists.
+  if (saved) return <SecretReveal redacted />
+  if (!canManage) return null
+
+  return (
+    <SecretInput
+      value={value}
+      onChange={setValue}
+      placeholder={`Paste ${secretName}`}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          void handleSave()
+        }
+      }}
+      endAdornment={
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button
+              type='button'
+              variant='quiet'
+              className='size-[18px] rounded-sm p-0'
+              onClick={() => void handleSave()}
+              disabled={!canSave}
+              aria-label='Save'
+            >
+              <ArrowRight className='size-[13px]' />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{isSaving ? 'Saving…' : 'Save'}</Tooltip.Content>
+        </Tooltip.Root>
+      }
+    />
+  )
+}
+
 function CredentialDisplay({ data }: { data: CredentialTagData }) {
+  const { canEdit } = useUserPermissionsContext()
+
+  if (data.type === 'secret_input') {
+    return <SecretInputDisplay data={data} />
+  }
+
   if (data.type === 'link') {
-    if (!data.provider) return null
+    // Connecting a credential mutates the workspace — hide it from read-only members.
+    if (!data.provider || !canEdit) return null
     const Icon = getCredentialIcon(data.provider) ?? LockIcon
     return (
       <a