fix(knowledge): align secret reference styling and caret tracking

Author: waleedlatif1

apps/sim/app/o/[organizationId]/settings/components/integrations/search-source-setup.test.tsx

@@ -269,6 +269,7 @@ async function chooseSyncFrequency(label: string) {
 async function fill(placeholder: string, value: string) {
   const input = document.querySelector<HTMLInputElement>(`input[placeholder="${placeholder}"]`)
   expect(input, `Input ${placeholder}`).not.toBeNull()
+  await act(async () => input?.focus())
   await act(async () => {
     Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, value)
     input?.dispatchEvent(new Event('input', { bubbles: true }))
@@ -897,16 +898,16 @@ describe('member content credentials in real add and edit dialogs', () => {
     )
     await click(card!)
     expect(document.body.textContent).not.toContain('Connected members')
-    expect(button('Administrator token')).toHaveAttribute('aria-checked', 'true')
-    expect(document.body.textContent).not.toContain('Connection method')
+    expect(document.body.textContent).not.toContain('Administrator token')
+    expect(document.body.textContent).toContain('Everyone in this workspace')
     await fill('Enter your GitLab PAT', 'new-pat')
     await fill('gitlab.example.com', 'gitlab.example.test')
     await fill('group/project or numeric ID', '1')
     expect(button('Connect & Sync')).toBeEnabled()
     await click(button('Connect & Sync'))
     expect(mocks.create.mock.calls[1][0]).toMatchObject({
       connectorType: 'gitlab',
-      accessMode: 'admin',
+      accessMode: 'workspace',
       apiKey: 'new-pat',
     })
     expect(mocks.create.mock.calls[1][0].sourceConfig).not.toHaveProperty('excludeChannels')

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.test.tsx

@@ -905,10 +905,24 @@ describe('Search setup options', () => {
       input.dispatchEvent(new Event('input', { bubbles: true }))
     })
     expect(document.body.textContent).toContain('GITLAB_PAT')
+    expect(input.className).toContain('text-[var(--brand-secondary)]')
+    await act(async () => {
+      input.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+      input.setSelectionRange(0, 0)
+      input.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
+    })
+    expect(document.querySelector('[role="menuitem"]')).toBeNull()
+    expect(input.value).toBe('{{GIT')
+    await act(async () => {
+      input.setSelectionRange(input.value.length, input.value.length)
+      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'End', bubbles: true }))
+    })
+    expect(document.body.textContent).toContain('GITLAB_PAT')
     await act(async () =>
       input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
     )
     expect(input.value).toBe('{{GITLAB_PAT}}')
+    expect(input.className).toContain('text-[var(--brand-secondary)]')
     expect(mocks.create).not.toHaveBeenCalled()
     await act(async () => button('Connect & Sync').click())
     expect(mocks.create).toHaveBeenCalledWith(

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/connector-api-key-input.tsx

@@ -36,6 +36,12 @@ export function ConnectorApiKeyInput({
           setCursorPosition(inputRef.current?.selectionStart ?? next.length)
           setShowSecrets(true)
         }}
+        onSelect={(event) => {
+          setCursorPosition(event.currentTarget.selectionStart ?? value.length)
+        }}
+        inputClassName={
+          value.trimStart().startsWith('{{') ? 'text-[var(--brand-secondary)]' : undefined
+        }
         placeholder={placeholder}
       />
       {visible && (