+
diff --git a/frontend/components/secrets/BrokenReferencesDialog.tsx b/frontend/components/secrets/BrokenReferencesDialog.tsx
new file mode 100644
index 000000000..9e4460f84
--- /dev/null
+++ b/frontend/components/secrets/BrokenReferencesDialog.tsx
@@ -0,0 +1,59 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import GenericDialog from '@/components/common/GenericDialog'
+import { Alert } from '@/components/common/Alert'
+import { Button } from '@/components/common/Button'
+import { ReferenceValidationError } from '@/utils/secretReferences'
+
+interface BrokenReferencesDialogProps {
+ warnings: ReferenceValidationError[]
+ onSaveAnyway: () => void
+}
+
+export const BrokenReferencesDialog = forwardRef<
+ { openModal: () => void; closeModal: () => void },
+ BrokenReferencesDialogProps
+>(({ warnings, onSaveAnyway }, ref) => {
+ const dialogRef = useRef<{ openModal: () => void; closeModal: () => void }>(null)
+
+ useImperativeHandle(ref, () => ({
+ openModal: () => dialogRef.current?.openModal(),
+ closeModal: () => dialogRef.current?.closeModal(),
+ }))
+
+ return (
+
+
+
+ {warnings.length} broken reference{warnings.length !== 1 ? 's' : ''} found. These
+ references may not resolve correctly at runtime.
+
+
+
+
+
+
+
+ )
+})
+
+BrokenReferencesDialog.displayName = 'BrokenReferencesDialog'
diff --git a/frontend/components/secrets/ReferenceAutocompleteDropdown.tsx b/frontend/components/secrets/ReferenceAutocompleteDropdown.tsx
new file mode 100644
index 000000000..79574c409
--- /dev/null
+++ b/frontend/components/secrets/ReferenceAutocompleteDropdown.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react'
+import clsx from 'clsx'
+import { FaKey, FaCubes, FaFolder } from 'react-icons/fa'
+import { BsListColumnsReverse } from 'react-icons/bs'
+import { MdKeyboardReturn, MdOpenInNew } from 'react-icons/md'
+import { ReferenceSuggestion } from '@/utils/secretReferences'
+
+interface ReferenceAutocompleteDropdownProps {
+ suggestions: ReferenceSuggestion[]
+ activeIndex: number
+ onSelect: (index: number) => void
+ onNavigate?: (index: number) => void
+ visible: boolean
+}
+
+const typeIcon: Record
=
+ {
+ key: {
+ icon: ,
+ className: 'text-emerald-600 dark:text-emerald-400',
+ },
+ env: {
+ icon: ,
+ className: 'text-blue-600 dark:text-blue-400',
+ },
+ app: {
+ icon: ,
+ className: 'text-purple-600 dark:text-purple-400',
+ },
+ folder: {
+ icon: ,
+ className: 'text-amber-600 dark:text-amber-400',
+ },
+ }
+
+export const ReferenceAutocompleteDropdown: React.FC = ({
+ suggestions,
+ activeIndex,
+ onSelect,
+ onNavigate,
+ visible,
+}) => {
+ const listRef = useRef(null)
+ const activeItemRef = useRef(null)
+
+ useEffect(() => {
+ activeItemRef.current?.scrollIntoView({ block: 'nearest' })
+ }, [activeIndex])
+
+ if (!visible || suggestions.length === 0) return null
+
+ return (
+
+
= 0 ? `ref-option-${activeIndex}` : undefined}
+ >
+ {suggestions.map((suggestion, index) => {
+ const { icon, className: iconClass } = typeIcon[suggestion.type]
+ const isActive = index === activeIndex
+
+ return (
+ - {
+ e.preventDefault() // prevent textarea blur
+ if ((e.ctrlKey || e.metaKey) && onNavigate) {
+ onNavigate(index)
+ } else {
+ onSelect(index)
+ }
+ }}
+ >
+ {icon}
+ {suggestion.label}
+ {isActive ? (
+
+
+ Enter
+
+
+
+ Ctrl+Enter
+
+
+
+ ) : suggestion.description ? (
+
+ {suggestion.description}
+
+ ) : null}
+
+ )
+ })}
+
+