From 817ca0d0d7fa44a4b642fdf618507c35b1cf6535 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 7 Aug 2026 11:51:33 -0700
Subject: [PATCH 1/2] credentials continue

---
 .../app/api/auth/trello/authorize/route.ts    |  17 +
 .../sim/app/api/auth/trello/callback/route.ts |  36 +-
 apps/sim/app/api/auth/trello/store/route.ts   |   2 +
 .../components/agent-group/tool-call-item.tsx |  14 +-
 .../components/chat-content/chat-content.tsx  |   8 +
 .../components/interaction-card.tsx           | 129 ++++
 .../components/question/question.test.ts      |  82 ++
 .../components/question/question.tsx          | 234 +++---
 .../components/special-tags/index.ts          |   8 +
 .../special-tags/special-tags.test.ts         |  95 ++-
 .../special-tags/special-tags.test.tsx        | 495 +++++++++++-
 .../components/special-tags/special-tags.tsx  | 725 ++++++++++++++++--
 .../special-tags/use-oauth-chip-connection.ts | 352 +++++++++
 .../message-content/message-content.tsx       |   8 +
 .../message-actions-visibility.test.ts        |   6 +-
 .../message-actions-visibility.ts             |  12 +-
 .../mothership-chat/mothership-chat.tsx       |  77 +-
 .../client-credential-account-modal.tsx       |   8 +-
 .../connect-service-account-modal.tsx         |  17 +-
 .../token-service-account-modal.tsx           |   3 +-
 .../hooks/queries/oauth/oauth-connections.ts  |   3 +-
 apps/sim/hooks/use-oauth-return.ts            |  96 ++-
 .../api/contracts/oauth-connections.test.ts   |  19 +
 .../lib/api/contracts/oauth-connections.ts    |  10 +-
 .../copilot/chat/sim-key-redaction.test.ts    |  34 +
 .../sim/lib/copilot/chat/sim-key-redaction.ts |  55 +-
 .../lib/copilot/generated/tool-catalog-v1.ts  |   2 +-
 .../lib/copilot/generated/tool-schemas-v1.ts  |   2 +-
 .../tool-executor/register-handlers.ts        |   3 +
 apps/sim/lib/copilot/tools/handlers/oauth.ts  |   5 +-
 apps/sim/lib/credentials/draft-hooks.ts       |  70 +-
 .../credentials/oauth-chat-attempt.test.ts    | 134 ++++
 .../sim/lib/credentials/oauth-chat-attempt.ts | 235 ++++++
 33 files changed, 2688 insertions(+), 308 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
 create mode 100644 apps/sim/lib/credentials/oauth-chat-attempt.test.ts
 create mode 100644 apps/sim/lib/credentials/oauth-chat-attempt.ts

diff --git a/apps/sim/app/api/auth/trello/authorize/route.ts b/apps/sim/app/api/auth/trello/authorize/route.ts
index fd6aa17d0f3..b69c6caed2e 100644
--- a/apps/sim/app/api/auth/trello/authorize/route.ts
+++ b/apps/sim/app/api/auth/trello/authorize/route.ts
@@ -6,6 +6,7 @@ import { parseRequest } from '@/lib/api/server'
 import { getSession } from '@/lib/auth'
 import { env } from '@/lib/core/config/env'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+import { isSameOrigin } from '@/lib/core/utils/validation'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { getCanonicalScopesForProvider } from '@/lib/oauth/utils'
 
@@ -14,6 +15,7 @@ const logger = createLogger('TrelloAuthorize')
 export const dynamic = 'force-dynamic'
 
 const TRELLO_STATE_COOKIE = 'trello_oauth_state'
+const TRELLO_RETURN_URL_COOKIE = 'trello_return_url'
 const TRELLO_STATE_COOKIE_PATH = '/api/auth/trello'
 const TRELLO_STATE_COOKIE_MAX_AGE_SECONDS = 60 * 10
 
@@ -26,6 +28,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
 
     const parsed = await parseRequest(authorizeTrelloContract, request, {})
     if (!parsed.success) return parsed.response
+    const { returnUrl: requestedReturnUrl } = parsed.data.query
 
     const apiKey = env.TRELLO_API_KEY
 
@@ -57,6 +60,20 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
       maxAge: TRELLO_STATE_COOKIE_MAX_AGE_SECONDS,
       path: TRELLO_STATE_COOKIE_PATH,
     })
+    if (requestedReturnUrl && isSameOrigin(requestedReturnUrl)) {
+      response.cookies.set(TRELLO_RETURN_URL_COOKIE, requestedReturnUrl, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: TRELLO_STATE_COOKIE_MAX_AGE_SECONDS,
+        path: TRELLO_STATE_COOKIE_PATH,
+      })
+    } else {
+      response.cookies.delete({
+        name: TRELLO_RETURN_URL_COOKIE,
+        path: TRELLO_STATE_COOKIE_PATH,
+      })
+    }
     return response
   } catch (error) {
     logger.error('Error initiating Trello authorization:', error)
diff --git a/apps/sim/app/api/auth/trello/callback/route.ts b/apps/sim/app/api/auth/trello/callback/route.ts
index 9ef74c2081e..2d45e1dca3b 100644
--- a/apps/sim/app/api/auth/trello/callback/route.ts
+++ b/apps/sim/app/api/auth/trello/callback/route.ts
@@ -3,6 +3,7 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { trelloCallbackContract } from '@/lib/api/contracts/oauth-connections'
 import { parseRequest } from '@/lib/api/server'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+import { isSameOrigin } from '@/lib/core/utils/validation'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 
 const logger = createLogger('TrelloCallback')
@@ -10,6 +11,8 @@ const logger = createLogger('TrelloCallback')
 export const dynamic = 'force-dynamic'
 
 const TRELLO_STATE_COOKIE = 'trello_oauth_state'
+const TRELLO_RETURN_URL_COOKIE = 'trello_return_url'
+const TRELLO_COOKIE_PATH = '/api/auth/trello'
 
 function escapeForJsString(value: string): string {
   return value.replace(/[\\'"<>&\r\n\u2028\u2029]/g, (ch) => {
@@ -17,9 +20,15 @@ function escapeForJsString(value: string): string {
   })
 }
 
-function renderErrorPage(baseUrl: string, redirectQuery: string) {
+function withResultParam(returnUrl: string, key: string, value: string): string {
+  const url = new URL(returnUrl)
+  url.searchParams.set(key, value)
+  return url.toString()
+}
+
+function renderErrorPage(redirectUrl: string) {
   return new NextResponse(
-    `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Trello connection failed</title></head><body><script>window.location.href=${JSON.stringify(`${baseUrl}/workspace?${redirectQuery}`)};</script><p>Trello connection failed. Redirecting...</p></body></html>`,
+    `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Trello connection failed</title></head><body><script>window.location.href=${JSON.stringify(redirectUrl).replace(/</g, '\\u003c')};</script><p>Trello connection failed. Redirecting...</p></body></html>`,
     {
       status: 400,
       headers: {
@@ -35,6 +44,11 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
   if (!parsed.success) return parsed.response
 
   const baseUrl = getBaseUrl()
+  const requestedReturnUrl = request.cookies.get(TRELLO_RETURN_URL_COOKIE)?.value
+  const returnUrl =
+    requestedReturnUrl && isSameOrigin(requestedReturnUrl)
+      ? requestedReturnUrl
+      : `${baseUrl}/workspace`
   const queryState = parsed.data.query.state
   const cookieState = request.cookies.get(TRELLO_STATE_COOKIE)?.value
 
@@ -43,12 +57,20 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
       hasQueryState: Boolean(queryState),
       hasCookieState: Boolean(cookieState),
     })
-    const response = renderErrorPage(baseUrl, 'error=trello_state_mismatch')
-    response.cookies.delete({ name: TRELLO_STATE_COOKIE, path: '/api/auth/trello' })
+    const response = renderErrorPage(withResultParam(returnUrl, 'error', 'trello_state_mismatch'))
+    response.cookies.delete({ name: TRELLO_STATE_COOKIE, path: TRELLO_COOKIE_PATH })
+    response.cookies.delete({ name: TRELLO_RETURN_URL_COOKIE, path: TRELLO_COOKIE_PATH })
     return response
   }
 
   const safeState = escapeForJsString(queryState)
+  const successReturnUrl = escapeForJsString(withResultParam(returnUrl, 'trello_connected', 'true'))
+  const storeFailureReturnUrl = escapeForJsString(
+    withResultParam(returnUrl, 'error', 'trello_failed')
+  )
+  const authFailureReturnUrl = escapeForJsString(
+    withResultParam(returnUrl, 'error', 'trello_auth_failed')
+  )
 
   return new NextResponse(
     `<!DOCTYPE html>
@@ -142,7 +164,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
             if (data.success) {
               statusEl.textContent = 'Success! Redirecting...';
               setTimeout(function() {
-                window.location.href = '${baseUrl}/workspace?trello_connected=true';
+                window.location.href = '${successReturnUrl}';
               }, 500);
             } else {
               throw new Error(data.error || 'Failed to save connection');
@@ -153,7 +175,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
             errorEl.style.display = 'block';
             statusEl.textContent = 'Connection failed';
             setTimeout(function() {
-              window.location.href = '${baseUrl}/workspace?error=trello_failed';
+              window.location.href = '${storeFailureReturnUrl}';
             }, 3000);
           });
 
@@ -162,7 +184,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
           errorEl.style.display = 'block';
           statusEl.textContent = 'Connection failed';
           setTimeout(function() {
-            window.location.href = '${baseUrl}/workspace?error=trello_auth_failed';
+            window.location.href = '${authFailureReturnUrl}';
           }, 3000);
         }
       })();
diff --git a/apps/sim/app/api/auth/trello/store/route.ts b/apps/sim/app/api/auth/trello/store/route.ts
index 156ed9a65d6..a9ca15b7ee4 100644
--- a/apps/sim/app/api/auth/trello/store/route.ts
+++ b/apps/sim/app/api/auth/trello/store/route.ts
@@ -17,10 +17,12 @@ const logger = createLogger('TrelloStore')
 export const dynamic = 'force-dynamic'
 
 const TRELLO_STATE_COOKIE = 'trello_oauth_state'
+const TRELLO_RETURN_URL_COOKIE = 'trello_return_url'
 const TRELLO_STATE_COOKIE_PATH = '/api/auth/trello'
 
 function clearStateCookie(response: NextResponse) {
   response.cookies.delete({ name: TRELLO_STATE_COOKIE, path: TRELLO_STATE_COOKIE_PATH })
+  response.cookies.delete({ name: TRELLO_RETURN_URL_COOKIE, path: TRELLO_STATE_COOKIE_PATH })
   return response
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index 4e07b66f747..71d675e02d5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -206,11 +206,13 @@ export function ToolCallItem({
     return (
       <div className='pl-6'>
         <CredentialDisplay
-          data={{
-            type: 'terminal_handoff',
-            value: terminalHandoff.terminalId,
-            name: terminalHandoff.reason,
-          }}
+          data={[
+            {
+              type: 'terminal_handoff',
+              value: terminalHandoff.terminalId,
+              name: terminalHandoff.reason,
+            },
+          ]}
         />
       </div>
     )
@@ -220,7 +222,7 @@ export function ToolCallItem({
     const reason = typeof params?.reason === 'string' ? params.reason.trim() : ''
     return (
       <div className='pl-6'>
-        <CredentialDisplay data={{ type: 'browser_takeover', name: reason }} />
+        <CredentialDisplay data={[{ type: 'browser_takeover', name: reason }]} />
       </div>
     )
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
index 1fd9961a504..def9e6f7839 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
@@ -17,6 +17,7 @@ import { extractTextContent } from '@/lib/core/utils/react-node-text'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import {
   type ContentSegment,
+  type CredentialSubmissionPayload,
   parseSpecialTags,
   SpecialTags,
 } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
@@ -394,9 +395,12 @@ const MARKDOWN_COMPONENTS = {
 
 interface ChatContentProps {
   content: string
+  messageId?: string
   isStreaming?: boolean
   /** Transcript-derived answers for this message's question card (renders the recap). */
   questionAnswers?: string[]
+  /** Transcript-derived status payload for this message's credential card. */
+  credentialSubmission?: CredentialSubmissionPayload
   onOptionSelect?: (id: string) => void
   onQuestionDismiss?: () => void
   onWorkspaceResourceSelect?: (resource: WorkspaceResourceRef) => void
@@ -412,8 +416,10 @@ interface ChatContentProps {
 
 function ChatContentInner({
   content,
+  messageId,
   isStreaming = false,
   questionAnswers,
+  credentialSubmission,
   onOptionSelect,
   onQuestionDismiss,
   onWorkspaceResourceSelect,
@@ -636,7 +642,9 @@ function ChatContentInner({
           <SpecialTags
             key={`special-${group.index}`}
             segment={group.segment}
+            interactionId={`${messageId ?? 'message'}:${group.index}`}
             questionAnswers={questionAnswers}
+            credentialSubmission={credentialSubmission}
             onOptionSelect={onOptionSelect}
             onQuestionDismiss={onQuestionDismiss}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx
new file mode 100644
index 00000000000..3ad8133f722
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx
@@ -0,0 +1,129 @@
+import { forwardRef, type InputHTMLAttributes, type MouseEventHandler, type ReactNode } from 'react'
+import { ArrowRight, cn } from '@sim/emcn'
+
+export const INTERACTION_CARD_ROW_CLASSES =
+  'flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left transition-colors'
+
+export const INTERACTION_CARD_TEXT_INPUT_CLASSES =
+  'min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
+
+export interface InteractionCardRecapItem {
+  label: string
+  values: readonly string[]
+}
+
+interface InteractionCardProps {
+  children: ReactNode
+  title?: ReactNode
+  actions?: ReactNode
+  className?: string
+}
+
+/**
+ * Shared chat-inline card chrome for terminal UI tags that need user input.
+ * Question choices and credential controls use this same shell so their
+ * spacing, border, surface, and header remain visually identical.
+ */
+export function InteractionCard({ children, title, actions, className }: InteractionCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        className
+      )}
+    >
+      {title !== undefined && (
+        <div className='flex items-center justify-between gap-2 px-2 py-2'>
+          <p className='min-w-0 flex-1 break-words text-[var(--text-primary)] text-sm'>{title}</p>
+          {actions}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+interface InteractionCardRecapProps {
+  items: readonly InteractionCardRecapItem[]
+}
+
+/** Shared answered-state layout used by questions and credential requests. */
+export function InteractionCardRecap({ items }: InteractionCardRecapProps) {
+  return (
+    <InteractionCard>
+      {items.map((item, index) => (
+        <div key={`${item.label}-${index}`} className='px-2 py-2'>
+          <p className='text-[var(--text-primary)] text-sm'>{item.label}</p>
+          <div className='mt-1.5 flex flex-col gap-1 text-[var(--text-muted)] text-sm'>
+            {item.values.map((value, valueIndex) => (
+              <p key={`${value}-${valueIndex}`}>{value}</p>
+            ))}
+          </div>
+        </div>
+      ))}
+    </InteractionCard>
+  )
+}
+
+export interface InteractionCardInputRowProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
+  divided?: boolean
+  leading?: ReactNode
+  trailing?: ReactNode
+  inputClassName?: string
+}
+
+/** Shared inline-input row used by question free text and credential secrets. */
+export const InteractionCardInputRow = forwardRef<HTMLInputElement, InteractionCardInputRowProps>(
+  ({ divided = false, leading, trailing, inputClassName, ...inputProps }, ref) => (
+    <div className={cn(INTERACTION_CARD_ROW_CLASSES, divided && 'border-t')}>
+      {leading}
+      <input
+        ref={ref}
+        className={cn(INTERACTION_CARD_TEXT_INPUT_CLASSES, inputClassName)}
+        {...inputProps}
+      />
+      {trailing}
+    </div>
+  )
+)
+InteractionCardInputRow.displayName = 'InteractionCardInputRow'
+
+interface InteractionCardActionRowProps {
+  label: string
+  leading?: ReactNode
+  disabled?: boolean
+  onClick: MouseEventHandler<HTMLButtonElement>
+}
+
+/** Shared terminal action row used for question and credential submission. */
+export function InteractionCardActionRow({
+  label,
+  leading,
+  disabled = false,
+  onClick,
+}: InteractionCardActionRowProps) {
+  return (
+    <button
+      type='button'
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        INTERACTION_CARD_ROW_CLASSES,
+        'border-t',
+        disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]'
+      )}
+    >
+      {leading}
+      <span
+        className={cn(
+          'flex-1 truncate text-sm',
+          disabled ? 'text-[var(--text-muted)]' : 'text-[var(--text-body)]'
+        )}
+      >
+        {label}
+      </span>
+      <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+    </button>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.test.ts
index c22bc12ac5b..5265b9f3668 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.test.ts
@@ -210,4 +210,86 @@ describe('QuestionDisplay', () => {
     act(() => root.unmount())
     container.remove()
   })
+
+  it('uses Continue before the final multi-select page and Submit on the last page', () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const finalQuestion: QuestionItem = {
+      type: 'multi_select',
+      prompt: 'Which format should the report use?',
+      options: [{ id: 'pdf', label: 'PDF' }],
+    }
+
+    act(() => {
+      root.render(
+        createElement(QuestionDisplay, {
+          data: [QUESTIONS[2], finalQuestion],
+          onSelect: () => undefined,
+        })
+      )
+    })
+
+    const firstOption = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'EST'
+    )
+    act(() => firstOption?.click())
+
+    const continueButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Continue'
+    )
+    expect(continueButton).toBeDefined()
+    act(() => continueButton?.click())
+
+    expect(container.textContent).toContain(finalQuestion.prompt)
+    expect(
+      Array.from(container.querySelectorAll('button')).some(
+        (button) => button.textContent === 'Submit'
+      )
+    ).toBe(true)
+
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('uses Continue before the final single-select page instead of advancing on selection', () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const onSelect = vi.fn()
+
+    act(() => {
+      root.render(
+        createElement(QuestionDisplay, {
+          data: QUESTIONS.slice(0, 2),
+          onSelect,
+        })
+      )
+    })
+
+    const firstOption = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Keep the newest entry'
+    )
+    act(() => firstOption?.click())
+
+    expect(container.textContent).toContain(QUESTIONS[0].prompt)
+    expect(onSelect).not.toHaveBeenCalled()
+    const continueButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Continue'
+    )
+    expect(continueButton?.disabled).toBe(false)
+    act(() => continueButton?.click())
+
+    expect(container.textContent).toContain(QUESTIONS[1].prompt)
+    expect(
+      Array.from(container.querySelectorAll('button')).some(
+        (button) => button.textContent === 'Submit'
+      )
+    ).toBe(true)
+
+    act(() => root.unmount())
+    container.remove()
+  })
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
index 5756f57c72f..8d7df45d5d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
@@ -12,6 +12,13 @@ import {
   cn,
   X,
 } from '@sim/emcn'
+import {
+  INTERACTION_CARD_ROW_CLASSES,
+  InteractionCard,
+  InteractionCardActionRow,
+  InteractionCardInputRow,
+  InteractionCardRecap,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card'
 import type { QuestionItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 
 /**
@@ -46,9 +53,6 @@ export function parseQuestionAnswerMessage(
   return answers
 }
 
-const OPTION_ROW_CLASSES =
-  'flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left transition-colors'
-
 /** Ghost icon-button chrome shared by the stepper chevrons and the dismiss X. */
 const ICON_BUTTON_CLASSES = 'relative size-[14px] flex-shrink-0 p-0'
 
@@ -126,9 +130,6 @@ export function QuestionDisplay({
   const customFor = (i: number, customs: string[]): string =>
     data[i].type === 'multi_select' && !(customCheckedByStep[i] ?? false) ? '' : (customs[i] ?? '')
 
-  const containerClasses =
-    'rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]'
-
   // Transcript answers win over local state: they survive reloads (local
   // phase does not) and keep live + rehydrated renders identical.
   const localAnswers =
@@ -140,18 +141,12 @@ export function QuestionDisplay({
   const recapAnswers = transcriptAnswers ?? localAnswers
   if (data.length > 0 && recapAnswers) {
     return (
-      <div className={containerClasses}>
-        {data.map((question, i) => (
-          <div key={i} className='px-2 py-2'>
-            <p className='text-[var(--text-primary)] text-sm'>{question.prompt}</p>
-            <div className='mt-1.5 flex flex-col gap-1 text-[var(--text-muted)] text-sm'>
-              {answerPartsForDisplay(question, recapAnswers[i] ?? '').map((answer, answerIndex) => (
-                <p key={answerIndex}>{answer}</p>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
+      <InteractionCardRecap
+        items={data.map((question, index) => ({
+          label: question.prompt,
+          values: answerPartsForDisplay(question, recapAnswers[index] ?? ''),
+        }))}
+      />
     )
   }
 
@@ -162,6 +157,7 @@ export function QuestionDisplay({
   const options = question.options
   const selected = selectedByStep[step] ?? []
   const isMulti = question.type === 'multi_select'
+  const usesStepAction = isMulti || data.length > 1
 
   const commitCustom = (): string[] => {
     const next = [...customByStep]
@@ -201,7 +197,7 @@ export function QuestionDisplay({
     customs[step] = ''
     setCustomByStep(customs)
     setFreeText('')
-    finishStep(selections, customs)
+    if (!usesStepAction) finishStep(selections, customs)
   }
 
   const handleMultiToggle = (label: string) => {
@@ -213,9 +209,17 @@ export function QuestionDisplay({
     setSelectedByStep(selections)
   }
 
-  /** multi_select confirm: commits selections and/or typed text, then advances. */
-  const submitMultiStep = () => {
-    finishStep(selectedByStep, commitCustom())
+  /** Confirms the current page, then advances or submits the whole batch. */
+  const submitCurrentStep = () => {
+    const customs = commitCustom()
+    if (isMulti) {
+      finishStep(selectedByStep, customs)
+      return
+    }
+    const selections = [...selectedByStep]
+    if ((customs[step] ?? '').trim()) selections[step] = []
+    setSelectedByStep(selections)
+    finishStep(selections, customs)
   }
 
   /** Sets whether the typed "Something else" text counts — never touches the text. */
@@ -247,14 +251,12 @@ export function QuestionDisplay({
     return data[i].type === 'multi_select' ? (customCheckedByStep[i] ?? false) : true
   }
 
-  const canSubmitStep = !disabled && (isMulti ? stepAnswered(step) : freeText.trim().length > 0)
+  const canSubmitStep = !disabled && stepAnswered(step)
 
   return (
-    <div className={containerClasses}>
-      <div className='flex items-center justify-between gap-2 px-2 py-2'>
-        <p className='min-w-0 flex-1 break-words text-[var(--text-primary)] text-sm'>
-          {question.prompt}
-        </p>
+    <InteractionCard
+      title={question.prompt}
+      actions={
         <div className='flex items-center gap-3'>
           {data.length > 1 && (
             <div className='flex items-center gap-2'>
@@ -309,7 +311,8 @@ export function QuestionDisplay({
             </Button>
           )}
         </div>
-      </div>
+      }
+    >
       <div className='flex flex-col'>
         {options.map((option, i) => {
           const isSelected = selected.includes(option.label)
@@ -322,7 +325,7 @@ export function QuestionDisplay({
                 isMulti ? handleMultiToggle(option.label) : handleSingleSelect(option.label)
               }
               className={cn(
-                OPTION_ROW_CLASSES,
+                INTERACTION_CARD_ROW_CLASSES,
                 disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]',
                 i > 0 && 'border-t',
                 isSelected && 'bg-[var(--surface-5)]'
@@ -336,105 +339,92 @@ export function QuestionDisplay({
             </button>
           )
         })}
-        <div className={cn(OPTION_ROW_CLASSES, options.length > 0 && 'border-t')}>
-          {isMulti && (
-            <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+        <InteractionCardInputRow
+          ref={freeTextInputRef}
+          divided={options.length > 0}
+          leading={
+            isMulti ? (
+              <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+                <button
+                  ref={freeTextCheckboxRef}
+                  type='button'
+                  aria-label='Include "Something else" in the answer'
+                  disabled={disabled}
+                  onClick={toggleCustomChecked}
+                  data-state={(customCheckedByStep[step] ?? false) ? 'checked' : 'unchecked'}
+                  data-disabled={disabled ? '' : undefined}
+                  className={checkboxVariants({ size: 'sm' })}
+                >
+                  {(customCheckedByStep[step] ?? false) && (
+                    <Check
+                      className={cn(
+                        checkboxIconVariants({ size: 'sm' }),
+                        'text-[var(--surface-2)]'
+                      )}
+                    />
+                  )}
+                </button>
+              </div>
+            ) : undefined
+          }
+          trailing={
+            !usesStepAction ? (
               <button
-                ref={freeTextCheckboxRef}
                 type='button'
-                aria-label='Include "Something else" in the answer'
-                disabled={disabled}
-                onClick={toggleCustomChecked}
-                data-state={(customCheckedByStep[step] ?? false) ? 'checked' : 'unchecked'}
-                data-disabled={disabled ? '' : undefined}
-                className={checkboxVariants({ size: 'sm' })}
+                aria-label='Submit answer'
+                disabled={!canSubmitStep}
+                onClick={submitSingleFreeText}
+                className='disabled:cursor-default'
               >
-                {(customCheckedByStep[step] ?? false) && (
-                  <Check
-                    className={cn(checkboxIconVariants({ size: 'sm' }), 'text-[var(--surface-2)]')}
-                  />
-                )}
+                <ArrowRight
+                  className={cn(
+                    'size-[16px] shrink-0 transition-colors',
+                    canSubmitStep ? 'text-[var(--text-body)]' : 'text-[var(--text-icon)]'
+                  )}
+                />
               </button>
-            </div>
-          )}
-          <input
-            ref={freeTextInputRef}
-            type='text'
-            value={freeText}
-            placeholder='Something else'
-            disabled={disabled}
-            onFocus={() => {
-              if (isMulti) setCustomChecked(true)
-            }}
-            onChange={(e) => setFreeText(e.target.value)}
-            onBlur={(event) => {
-              if (
-                isMulti &&
-                event.relatedTarget !== freeTextCheckboxRef.current &&
-                freeText.trim().length === 0
-              ) {
-                setCustomChecked(false)
-              }
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') {
-                e.currentTarget.blur()
-                return
-              }
-              if (e.key === 'Enter' && canSubmitStep) {
-                e.preventDefault()
-                if (isMulti) {
-                  submitMultiStep()
-                } else {
-                  submitSingleFreeText()
-                }
-              }
-            }}
-            aria-label={question.prompt}
-            className='min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
-          />
-          {!isMulti && (
-            <button
-              type='button'
-              aria-label='Submit answer'
-              disabled={!canSubmitStep}
-              onClick={submitSingleFreeText}
-              className='disabled:cursor-default'
-            >
-              <ArrowRight
-                className={cn(
-                  'size-[16px] shrink-0 transition-colors',
-                  canSubmitStep ? 'text-[var(--text-body)]' : 'text-[var(--text-icon)]'
-                )}
-              />
-            </button>
-          )}
-        </div>
-        {isMulti && (
-          <button
-            type='button'
+            ) : undefined
+          }
+          type='text'
+          value={freeText}
+          placeholder='Something else'
+          disabled={disabled}
+          onFocus={() => {
+            if (isMulti) setCustomChecked(true)
+          }}
+          onChange={(event) => setFreeText(event.target.value)}
+          onBlur={(event) => {
+            if (
+              isMulti &&
+              event.relatedTarget !== freeTextCheckboxRef.current &&
+              freeText.trim().length === 0
+            ) {
+              setCustomChecked(false)
+            }
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              event.currentTarget.blur()
+              return
+            }
+            if (event.key === 'Enter' && canSubmitStep) {
+              event.preventDefault()
+              if (usesStepAction) submitCurrentStep()
+              else submitSingleFreeText()
+            }
+          }}
+          aria-label={question.prompt}
+        />
+        {usesStepAction && (
+          <InteractionCardActionRow
+            label={isLast ? 'Submit' : 'Continue'}
             disabled={!canSubmitStep}
-            onClick={submitMultiStep}
-            className={cn(
-              OPTION_ROW_CLASSES,
-              'border-t',
-              canSubmitStep ? 'hover-hover:bg-[var(--surface-5)]' : 'cursor-not-allowed'
-            )}
-          >
-            <div className='flex size-[16px] flex-shrink-0 items-center justify-center' />
-            <span
-              className={cn(
-                'flex-1 truncate text-sm',
-                canSubmitStep ? 'text-[var(--text-body)]' : 'text-[var(--text-muted)]'
-              )}
-            >
-              Submit
-            </span>
-            <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-          </button>
+            onClick={submitCurrentStep}
+            leading={<div className='flex size-[16px] flex-shrink-0 items-center justify-center' />}
+          />
         )}
       </div>
-    </div>
+    </InteractionCard>
   )
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts
index dff2706b01d..030af87c6dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts
@@ -1,5 +1,7 @@
 export type {
   ContentSegment,
+  CredentialItemData,
+  CredentialSubmissionPayload,
   CredentialTagData,
   CredentialTagType,
   FileTagData,
@@ -19,9 +21,15 @@ export type {
 export {
   CREDENTIAL_TAG_TYPES,
   CredentialDisplay,
+  credentialTagHasVisibleCard,
+  formatCredentialSubmissionMessage,
   PendingTagIndicator,
+  parseCredentialSubmissionMessage,
+  parseCredentialSubmissionProgress,
+  parseCredentialTagBody,
   parseFileTag,
   parseJsonTagBody,
+  parseLastCredentialTag,
   parseLastQuestionTag,
   parseQuestionTagBody,
   parseSpecialTags,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.ts
index bdd324efa15..e28bf310594 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.ts
@@ -17,10 +17,17 @@ vi.mock('@/lib/auth/auth-client', () => ({
 import { scalingRatioOver4x } from '@/app/workspace/[workspaceId]/home/components/message-content/components/scaling-test-helpers'
 import type {
   ContentSegment,
+  CredentialItemData,
   IndexOfCache,
 } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags'
 import {
+  credentialTagHasVisibleCard,
+  formatCredentialSubmissionMessage,
   memoizedIndexOf,
+  parseCredentialSubmissionMessage,
+  parseCredentialSubmissionProgress,
+  parseCredentialTagBody,
+  parseLastCredentialTag,
   parseQuestionTagBody,
   parseSpecialTags,
   SPECIAL_TAG_NAMES,
@@ -35,6 +42,88 @@ function renderedText(segments: ContentSegment[]): string {
   return segments.map((segment) => ('content' in segment ? segment.content : '')).join('')
 }
 
+describe('parseCredentialTagBody', () => {
+  const secret: CredentialItemData = { type: 'secret_input', name: 'OPENAI_API_KEY' }
+  const oauth: CredentialItemData = {
+    type: 'link',
+    provider: 'google-email',
+    value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+  }
+
+  it('normalizes a singleton credential object to one row', () => {
+    expect(parseCredentialTagBody(JSON.stringify(secret))).toEqual([secret])
+  })
+
+  it('preserves a mixed credential-input batch in one tag', () => {
+    expect(parseCredentialTagBody(JSON.stringify([secret, oauth]))).toEqual([secret, oauth])
+  })
+
+  it('rejects empty arrays and batches containing an invalid row', () => {
+    expect(parseCredentialTagBody('[]')).toBeNull()
+    expect(parseCredentialTagBody(JSON.stringify([secret, { type: 'link' }]))).toBeNull()
+  })
+
+  it('formats and strictly pairs the safe continuation without secret values', () => {
+    const data = [oauth, secret]
+    const message = formatCredentialSubmissionMessage(data)
+
+    expect(message).toBe(
+      'Credential setup submitted — {"integrations":[{"name":"google-email","status":"connected"}],"secrets":[{"name":"OPENAI_API_KEY","status":"saved"}]}'
+    )
+    expect(parseCredentialSubmissionMessage(data, message)).toBe(true)
+    expect(parseCredentialSubmissionProgress(data, message)).toEqual({
+      integrations: [{ name: 'google-email', status: 'connected' }],
+      secrets: [{ name: 'OPENAI_API_KEY', status: 'saved' }],
+    })
+    expect(parseCredentialSubmissionMessage(data, `${message}!`)).toBe(false)
+  })
+
+  it('reports skipped rows without leaking secret values', () => {
+    const data = [oauth, secret]
+    const message = formatCredentialSubmissionMessage(data, {
+      connectedIntegrationIndexes: new Set(),
+      savedSecretIndexes: new Set(),
+    })
+
+    expect(message).toBe(
+      'Credential setup submitted — {"integrations":[{"name":"google-email","status":"skipped"}],"secrets":[{"name":"OPENAI_API_KEY","status":"skipped"}]}'
+    )
+    expect(parseCredentialSubmissionMessage(data, message)).toBe(true)
+  })
+
+  it('still pairs legacy completed setup messages after reload', () => {
+    expect(
+      parseCredentialSubmissionMessage(
+        [oauth, secret],
+        'Credential setup complete — integrations: google-email; secrets: OPENAI_API_KEY'
+      )
+    ).toBe(true)
+  })
+
+  it('extracts the last complete credential batch for transcript pairing', () => {
+    const content = `First <credential>${JSON.stringify(secret)}</credential> then <credential>${JSON.stringify([oauth, secret])}</credential>`
+    expect(parseLastCredentialTag(content)).toEqual([oauth, secret])
+  })
+
+  it('only reserves message actions when a credential card is visible to this member', () => {
+    const workspaceSecret: CredentialItemData = {
+      type: 'secret_input',
+      name: 'WORKSPACE_KEY',
+      scope: 'workspace',
+    }
+    const personalSecret: CredentialItemData = {
+      type: 'secret_input',
+      name: 'PERSONAL_KEY',
+      scope: 'personal',
+    }
+
+    expect(credentialTagHasVisibleCard([workspaceSecret], false)).toBe(false)
+    expect(credentialTagHasVisibleCard([personalSecret], false)).toBe(true)
+    expect(credentialTagHasVisibleCard([oauth], false)).toBe(false)
+    expect(credentialTagHasVisibleCard([oauth], true)).toBe(true)
+  })
+})
+
 /**
  * What the reader can actually see. Mirrors chat-content.tsx: adjacent text
  * segments concatenate, a `thinking` segment renders NOTHING, and every other
@@ -821,7 +910,7 @@ describe('service_account credential tag', () => {
     expect(credential).toBeDefined()
     expect(credential).toMatchObject({
       type: 'credential',
-      data: { type: 'service_account', provider: 'slack' },
+      data: [{ type: 'service_account', provider: 'slack' }],
     })
   })
 
@@ -830,7 +919,7 @@ describe('service_account credential tag', () => {
     const { segments } = parseSpecialTags(`<credential>${body}</credential>`, false)
 
     const credential = segments.find((segment) => segment.type === 'credential')
-    expect((credential as { data: { value?: string } }).data.value).toBeUndefined()
+    expect((credential as { data: Array<{ value?: string }> }).data[0].value).toBeUndefined()
   })
 
   it('suppresses the tag while it is still streaming', () => {
@@ -876,7 +965,7 @@ describe('service_account tag validation', () => {
     const credential = segments.find((segment) => segment.type === 'credential')
     expect(credential).toMatchObject({
       type: 'credential',
-      data: { type: 'service_account', provider: 'notion', credentialId: 'cred_abc123' },
+      data: [{ type: 'service_account', provider: 'notion', credentialId: 'cred_abc123' }],
     })
   })
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.tsx
index 8791ddd3d05..69cb9c3bda9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.tsx
@@ -5,9 +5,22 @@ import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-const { mockUseUserPermissionsContext, mockUseWorkspaceCredential } = vi.hoisted(() => ({
+const {
+  mockRefetchPersonalEnvironment,
+  mockRefetchWorkspaceCredentials,
+  mockSavePersonalEnvironment,
+  mockUpsertWorkspaceEnvironment,
+  mockUseUserPermissionsContext,
+  mockUseWorkspaceCredential,
+  mockUseWorkspaceCredentials,
+} = vi.hoisted(() => ({
+  mockRefetchPersonalEnvironment: vi.fn(async () => ({ data: {} })),
+  mockRefetchWorkspaceCredentials: vi.fn(async () => ({ data: [] })),
+  mockSavePersonalEnvironment: vi.fn(async () => undefined),
+  mockUpsertWorkspaceEnvironment: vi.fn(async () => undefined),
   mockUseUserPermissionsContext: vi.fn(),
   mockUseWorkspaceCredential: vi.fn(),
+  mockUseWorkspaceCredentials: vi.fn(),
 }))
 
 vi.mock('@/app/workspace/[workspaceId]/providers/workspace-permissions-provider', () => ({
@@ -20,9 +33,29 @@ vi.mock('next/navigation', () => ({
 
 vi.mock('@/hooks/queries/credentials', () => ({
   useWorkspaceCredential: mockUseWorkspaceCredential,
+  useWorkspaceCredentials: mockUseWorkspaceCredentials,
 }))
 
-import type { CredentialTagData } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags'
+vi.mock('@/hooks/queries/environment', () => ({
+  usePersonalEnvironment: () => ({
+    data: {},
+    refetch: mockRefetchPersonalEnvironment,
+  }),
+  useSavePersonalEnvironment: () => ({
+    isPending: false,
+    mutateAsync: mockSavePersonalEnvironment,
+  }),
+  useUpsertWorkspaceEnvironment: () => ({
+    isPending: false,
+    mutateAsync: mockUpsertWorkspaceEnvironment,
+  }),
+}))
+
+import {
+  createOAuthChatAttempt,
+  setOAuthChatAttemptStatus,
+} from '@/lib/credentials/oauth-chat-attempt'
+import type { CredentialItemData } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags'
 import {
   parseSpecialTags,
   SpecialTags,
@@ -32,21 +65,34 @@ import {
  * Minimal dependency-free render harness (the repo has no `@testing-library/react`). Mounts the
  * component in a real React 19 root under jsdom, matching the pattern in `use-autosave.test.tsx`.
  */
-function renderCredentialLink(data: CredentialTagData): { container: HTMLDivElement; root: Root } {
+function renderCredentialLink(data: CredentialItemData | CredentialItemData[]): {
+  container: HTMLDivElement
+  root: Root
+} {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   const container = document.createElement('div')
   const root: Root = createRoot(container)
   act(() => {
-    root.render(<SpecialTags segment={{ type: 'credential', data }} />)
+    root.render(
+      <SpecialTags segment={{ type: 'credential', data: Array.isArray(data) ? data : [data] }} />
+    )
   })
   return { container, root }
 }
 
 describe('CredentialDisplay link tag', () => {
   beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     vi.clearAllMocks()
+    window.localStorage.clear()
+    window.history.replaceState({}, '', '/workspace/workspace-1/chat/chat-1')
     mockUseUserPermissionsContext.mockReturnValue({ canEdit: true })
     mockUseWorkspaceCredential.mockReturnValue({ data: null })
+    mockUseWorkspaceCredentials.mockReturnValue({
+      data: [],
+      isFetched: true,
+      refetch: mockRefetchWorkspaceCredentials,
+    })
   })
 
   it('does not render an anchor for a javascript: scheme value', () => {
@@ -57,6 +103,7 @@ describe('CredentialDisplay link tag', () => {
     })
 
     expect(container.querySelector('a')).toBeNull()
+    expect(container.textContent).toBe('')
     act(() => root.unmount())
   })
 
@@ -68,6 +115,7 @@ describe('CredentialDisplay link tag', () => {
     })
 
     expect(container.querySelector('a')).toBeNull()
+    expect(container.textContent).toBe('')
     act(() => root.unmount())
   })
 
@@ -83,6 +131,289 @@ describe('CredentialDisplay link tag', () => {
     expect(link).not.toBeNull()
     expect(link?.getAttribute('href')).toBe(url)
     expect(container.textContent).toContain('Connect Google Drive')
+    expect(container.textContent).toContain('Connect integrations')
+    act(() => root.unmount())
+  })
+
+  it('continues the chat with provider names after integration setup', async () => {
+    const container = document.createElement('div')
+    const root: Root = createRoot(container)
+    const onOptionSelect = vi.fn()
+    const data: CredentialItemData[] = [
+      {
+        type: 'link',
+        provider: 'google-email',
+        value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+      },
+    ]
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      displayName: 'Gmail',
+      controlId: 'credential-card:0',
+      baselineCredentialIds: [],
+    })
+    window.history.replaceState({}, '', `?oauthAttempt=${attempt.id}`)
+
+    act(() => {
+      root.render(
+        <SpecialTags segment={{ type: 'credential', data }} onOptionSelect={onOptionSelect} />
+      )
+    })
+
+    const submitButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Submit'
+    )
+    expect(submitButton?.disabled).toBe(false)
+    act(() => {
+      setOAuthChatAttemptStatus(attempt.id, 'connected')
+    })
+    await act(async () => {
+      submitButton?.click()
+    })
+
+    expect(onOptionSelect).toHaveBeenCalledWith(
+      'Credential setup submitted — {"integrations":[{"name":"google-email","status":"connected"}],"secrets":[]}'
+    )
+    expect(container.textContent).toContain('Gmail')
+    expect(container.textContent).toContain('Connected')
+    act(() => root.unmount())
+  })
+
+  it('shows not connected after an unfinished OAuth tab returns focus', async () => {
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      displayName: 'Gmail',
+      controlId: 'credential-card:0',
+      baselineCredentialIds: [],
+    })
+    window.history.replaceState({}, '', `?oauthAttempt=${attempt.id}`)
+    const { container, root } = renderCredentialLink({
+      type: 'link',
+      provider: 'google-email',
+      value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+    })
+
+    expect(container.textContent).toContain('Waiting for Gmail connection')
+
+    await act(async () => {
+      window.dispatchEvent(new Event('blur'))
+      window.dispatchEvent(new Event('focus'))
+    })
+
+    expect(container.textContent).toContain('Not connected — connect Gmail')
+    act(() => root.unmount())
+  })
+
+  it('keeps a new-account link actionable when Gmail already has a credential', () => {
+    mockUseWorkspaceCredentials.mockReturnValue({
+      data: [{ id: 'existing-gmail', providerId: 'google' }],
+      isFetched: true,
+      refetch: mockRefetchWorkspaceCredentials,
+    })
+    const { container, root } = renderCredentialLink({
+      type: 'link',
+      provider: 'google-email',
+      value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+    })
+
+    expect(container.textContent).toContain('Connect another Gmail')
+    expect(container.textContent).not.toContain('Connected Gmail')
+    expect(container.querySelector('a')?.getAttribute('aria-disabled')).toBe('false')
+    act(() => root.unmount())
+  })
+
+  it('marks the row connected when a new matching credential appears elsewhere', async () => {
+    const existingCredential = {
+      id: 'existing-gmail',
+      providerId: 'google',
+      updatedAt: '2026-08-07T10:00:00Z',
+    }
+    let credentials = [existingCredential]
+    mockUseWorkspaceCredentials.mockImplementation(() => ({
+      data: credentials,
+      isFetched: true,
+      refetch: mockRefetchWorkspaceCredentials,
+    }))
+    const data: CredentialItemData = {
+      type: 'link',
+      provider: 'google-email',
+      value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+    }
+    const { container, root } = renderCredentialLink(data)
+
+    expect(container.textContent).toContain('Connect another Gmail')
+    credentials = [
+      existingCredential,
+      { id: 'new-gmail', providerId: 'google', updatedAt: '2026-08-07T10:05:00Z' },
+    ]
+    await act(async () => {
+      root.render(<SpecialTags segment={{ type: 'credential', data: [data] }} />)
+    })
+
+    expect(container.textContent).toContain('Connected Gmail')
+    // A workspace-wide change cannot be attributed to one row, so it shows the
+    // row as satisfied without disabling it — see the sibling-row case below.
+    expect(container.querySelector('a')?.getAttribute('aria-disabled')).toBe('false')
+    act(() => root.unmount())
+  })
+
+  it('refetches after returning from another tab and detects a new matching credential', async () => {
+    const existingCredential = {
+      id: 'existing-gmail',
+      providerId: 'google',
+      updatedAt: '2026-08-07T10:00:00Z',
+    }
+    mockUseWorkspaceCredentials.mockReturnValue({
+      data: [existingCredential],
+      isFetched: true,
+      refetch: mockRefetchWorkspaceCredentials,
+    })
+    mockRefetchWorkspaceCredentials.mockResolvedValueOnce({
+      data: [
+        existingCredential,
+        { id: 'new-gmail', providerId: 'google', updatedAt: '2026-08-07T10:05:00Z' },
+      ],
+    })
+    const { container, root } = renderCredentialLink({
+      type: 'link',
+      provider: 'google-email',
+      value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+    })
+
+    await act(async () => {
+      window.dispatchEvent(new Event('blur'))
+      window.dispatchEvent(new Event('focus'))
+    })
+
+    expect(mockRefetchWorkspaceCredentials).toHaveBeenCalledOnce()
+    expect(container.textContent).toContain('Connected Gmail')
+    act(() => root.unmount())
+  })
+
+  it('does not treat an unrelated update to a reconnect target as OAuth completion', async () => {
+    let credentials = [{ id: 'cred-1', providerId: 'google', updatedAt: '2026-08-07T10:00:00Z' }]
+    mockUseWorkspaceCredentials.mockImplementation(() => ({
+      data: credentials,
+      isFetched: true,
+      refetch: mockRefetchWorkspaceCredentials,
+    }))
+    const data: CredentialItemData = {
+      type: 'link',
+      provider: 'google-email',
+      value:
+        'https://sim.test/api/auth/oauth2/authorize?providerId=google-email&credentialId=cred-1',
+    }
+    const { container, root } = renderCredentialLink(data)
+
+    credentials = [{ ...credentials[0], updatedAt: '2026-08-07T10:05:00Z' }]
+    await act(async () => {
+      root.render(<SpecialTags segment={{ type: 'credential', data: [data] }} />)
+    })
+
+    expect(container.textContent).toContain('Reconnect Gmail')
+    expect(container.textContent).not.toContain('Connected Gmail')
+    act(() => root.unmount())
+  })
+
+  it('waits for the credential baseline before opening an OAuth link', () => {
+    mockUseWorkspaceCredentials.mockReturnValue({
+      data: undefined,
+      isFetched: false,
+      refetch: mockRefetchWorkspaceCredentials,
+    })
+    const { container, root } = renderCredentialLink({
+      type: 'link',
+      provider: 'google-email',
+      value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+    })
+
+    const link = container.querySelector('a')
+    expect(container.textContent).toContain('Checking Gmail connections')
+    expect(link?.getAttribute('aria-disabled')).toBe('true')
+    expect(link?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))).toBe(
+      false
+    )
+    act(() => root.unmount())
+  })
+
+  it('keeps a sibling row for the same provider clickable when one connects', async () => {
+    const existingCredential = {
+      id: 'existing-gmail',
+      providerId: 'google',
+      updatedAt: '2026-08-07T10:00:00Z',
+    }
+    let credentials = [existingCredential]
+    mockUseWorkspaceCredentials.mockImplementation(() => ({
+      data: credentials,
+      isFetched: true,
+      refetch: mockRefetchWorkspaceCredentials,
+    }))
+    const data: CredentialItemData[] = [
+      {
+        type: 'link',
+        provider: 'google-email',
+        value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+      },
+      {
+        type: 'link',
+        provider: 'google-email',
+        value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+      },
+    ]
+    const { container, root } = renderCredentialLink(data)
+
+    credentials = [
+      existingCredential,
+      { id: 'new-gmail', providerId: 'google', updatedAt: '2026-08-07T10:05:00Z' },
+    ]
+    await act(async () => {
+      root.render(<SpecialTags segment={{ type: 'credential', data }} />)
+    })
+
+    const rows = container.querySelectorAll('a')
+    expect(rows).toHaveLength(2)
+    for (const row of rows) {
+      expect(row.getAttribute('aria-disabled')).toBe('false')
+    }
+    act(() => root.unmount())
+  })
+
+  it('applies OAuth completion only to the card that launched it', () => {
+    const data: CredentialItemData[] = [
+      {
+        type: 'link',
+        provider: 'google-email',
+        value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+      },
+    ]
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      displayName: 'Gmail',
+      controlId: 'message-2:0:0',
+      baselineCredentialIds: [],
+    })
+    window.history.replaceState({}, '', `?oauthAttempt=${attempt.id}`)
+    const container = document.createElement('div')
+    const root: Root = createRoot(container)
+
+    act(() => {
+      root.render(
+        <>
+          <SpecialTags segment={{ type: 'credential', data }} interactionId='message-1:0' />
+          <SpecialTags segment={{ type: 'credential', data }} interactionId='message-2:0' />
+        </>
+      )
+      setOAuthChatAttemptStatus(attempt.id, 'connected')
+    })
+
+    expect(container.textContent?.match(/Connected Gmail/g)).toHaveLength(1)
+    expect(container.textContent?.match(/Connect Gmail/g)).toHaveLength(1)
     act(() => root.unmount())
   })
 
@@ -95,6 +426,7 @@ describe('CredentialDisplay link tag', () => {
     })
 
     expect(container.querySelector('a')).toBeNull()
+    expect(container.textContent).toBe('')
     act(() => root.unmount())
   })
 
@@ -125,13 +457,162 @@ describe('CredentialDisplay link tag', () => {
     expect(container.textContent).toContain('Reconnect Gmail')
     act(() => root.unmount())
   })
+
+  it('renders integrations and secrets in one card and saves secrets on Submit', async () => {
+    const container = document.createElement('div')
+    const root: Root = createRoot(container)
+    const onOptionSelect = vi.fn()
+    const data: CredentialItemData[] = [
+      {
+        type: 'secret_input',
+        name: 'OPENAI_API_KEY',
+      },
+      {
+        type: 'link',
+        provider: 'google-email',
+        value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+      },
+    ]
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      displayName: 'Gmail',
+      controlId: 'credential-card:0',
+      baselineCredentialIds: [],
+    })
+    window.history.replaceState({}, '', `?oauthAttempt=${attempt.id}`)
+
+    act(() => {
+      root.render(
+        <SpecialTags segment={{ type: 'credential', data }} onOptionSelect={onOptionSelect} />
+      )
+    })
+
+    expect(container.textContent).toContain('Set up credentials')
+    expect(container.textContent).not.toContain('1 of 2')
+    expect(container.querySelectorAll('a')).toHaveLength(1)
+    const secretInput = container.querySelector('input')
+    expect(secretInput?.getAttribute('placeholder')).toBe('Paste OPENAI_API_KEY')
+    expect(secretInput?.className).toContain('border-0 bg-transparent p-0')
+    expect(secretInput?.parentElement?.className).toContain('px-2 py-2')
+    expect(secretInput?.parentElement?.className).not.toContain('rounded')
+    expect(container.querySelector('svg rect')).toBeNull()
+    expect(container.querySelector('button[aria-label="Save"]')).toBeNull()
+
+    act(() => secretInput?.focus())
+    act(() => {
+      if (!secretInput) return
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set
+      valueSetter?.call(secretInput, 'sk-test-key')
+      secretInput.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+
+    const submitButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Submit'
+    )
+    expect(submitButton?.disabled).toBe(false)
+    expect(submitButton?.querySelector('div')).toBeNull()
+    await act(async () => {
+      submitButton?.click()
+    })
+
+    expect(mockUpsertWorkspaceEnvironment).toHaveBeenCalledWith({
+      workspaceId: 'workspace-1',
+      variables: { OPENAI_API_KEY: 'sk-test-key' },
+    })
+    expect(onOptionSelect).toHaveBeenCalledWith(
+      'Credential setup submitted — {"integrations":[{"name":"google-email","status":"skipped"}],"secrets":[{"name":"OPENAI_API_KEY","status":"saved"}]}'
+    )
+    expect(container.textContent).toContain('Gmail')
+    expect(container.textContent).toContain('Skipped')
+    expect(container.textContent).toContain('OPENAI_API_KEY')
+    expect(container.textContent).toContain('Added')
+    act(() => root.unmount())
+  })
+
+  it('keeps canonical secret indexes when permission filtering hides a workspace row', async () => {
+    mockUseUserPermissionsContext.mockReturnValue({ canEdit: false })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onOptionSelect = vi.fn()
+    const data: CredentialItemData[] = [
+      { type: 'secret_input', name: 'WORKSPACE_KEY', scope: 'workspace' },
+      { type: 'secret_input', name: 'PERSONAL_KEY', scope: 'personal' },
+    ]
+
+    act(() => {
+      root.render(
+        <SpecialTags segment={{ type: 'credential', data }} onOptionSelect={onOptionSelect} />
+      )
+    })
+
+    const input = container.querySelector('input')
+    expect(input?.getAttribute('placeholder')).toBe('Paste PERSONAL_KEY')
+    act(() => {
+      if (!input) return
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set
+      valueSetter?.call(input, 'personal-secret')
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    const submitButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Submit'
+    )
+    await act(async () => submitButton?.click())
+
+    expect(mockSavePersonalEnvironment).toHaveBeenCalledWith({
+      variables: { PERSONAL_KEY: 'personal-secret' },
+    })
+    expect(onOptionSelect).toHaveBeenCalledWith(
+      'Credential setup submitted — {"integrations":[],"secrets":[{"name":"WORKSPACE_KEY","status":"skipped"},{"name":"PERSONAL_KEY","status":"saved"}]}'
+    )
+    act(() => root.unmount())
+  })
+
+  it('renders one status recap from a transcript submission', () => {
+    const container = document.createElement('div')
+    const root: Root = createRoot(container)
+    const data: CredentialItemData[] = [
+      {
+        type: 'link',
+        provider: 'google-email',
+        value: 'https://sim.test/api/auth/oauth2/authorize?providerId=google-email',
+      },
+      { type: 'secret_input', name: 'OPENAI_API_KEY' },
+    ]
+
+    act(() => {
+      root.render(
+        <SpecialTags
+          segment={{ type: 'credential', data }}
+          credentialSubmission={{
+            integrations: [{ name: 'google-email', status: 'connected' }],
+            secrets: [{ name: 'OPENAI_API_KEY', status: 'skipped' }],
+          }}
+        />
+      )
+    })
+
+    expect(container.textContent).not.toContain('Credential setup')
+    expect(container.textContent).not.toContain('Set up credentials')
+    expect(container.textContent).toContain('GmailConnected')
+    expect(container.textContent).toContain('OPENAI_API_KEYSkipped')
+    expect(container.querySelector('input')).toBeNull()
+    act(() => root.unmount())
+  })
 })
 
 describe('parseSpecialTags sim_key placeholder', () => {
   it('accepts a value-less {"type":"sim_key"} tag as a credential segment', () => {
     const { segments } = parseSpecialTags('<credential>{"type":"sim_key"}</credential>', false)
     const credential = segments.find((s) => s.type === 'credential')
-    expect(credential).toEqual({ type: 'credential', data: { type: 'sim_key' } })
+    expect(credential).toEqual({ type: 'credential', data: [{ type: 'sim_key' }] })
   })
 
   it('still accepts the legacy {"redacted":true} form as a value-less sim_key placeholder', () => {
@@ -142,8 +623,8 @@ describe('parseSpecialTags sim_key placeholder', () => {
     const credential = segments.find((s) => s.type === 'credential')
     expect(credential?.type).toBe('credential')
     if (credential?.type === 'credential') {
-      expect(credential.data.type).toBe('sim_key')
-      expect(credential.data.value).toBeUndefined()
+      expect(credential.data[0].type).toBe('sim_key')
+      expect(credential.data[0].value).toBeUndefined()
     }
   })
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index fbfdf7a8fdd..4805c87295c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -3,12 +3,11 @@
 import { createElement, lazy, Suspense, useMemo, useState } from 'react'
 import {
   ArrowRight,
-  Button,
+  Check,
   ChevronDown,
   cn,
   Expandable,
   ExpandableContent,
-  SecretInput,
   SecretReveal,
   SquareArrowUpRight,
   Tooltip,
@@ -34,7 +33,15 @@ import { getServiceConfigByProviderId } from '@/lib/oauth/utils'
 import { finishTerminalHandoff, isTerminalAvailable } from '@/lib/terminal/transport'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
+import {
+  INTERACTION_CARD_ROW_CLASSES,
+  InteractionCard,
+  InteractionCardActionRow,
+  InteractionCardInputRow,
+  InteractionCardRecap,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card'
 import { QuestionDisplay } from '@/app/workspace/[workspaceId]/home/components/message-content/components/question'
+import { useOAuthChipConnection } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection'
 import type {
   ChatMessageContext,
   MothershipResource,
@@ -110,7 +117,7 @@ export const SECRET_INPUT_SCOPES = ['personal', 'workspace'] as const
 
 export type SecretInputScope = (typeof SECRET_INPUT_SCOPES)[number]
 
-export interface CredentialTagData {
+export interface CredentialItemData {
   value?: string
   type: CredentialTagType
   provider?: string
@@ -129,6 +136,120 @@ export interface CredentialTagData {
   credentialId?: string
 }
 
+/**
+ * Normalized `<credential>` payload. A singleton object remains valid for old
+ * messages, while an array lets one terminal tag render several controls as
+ * rows in a single card.
+ */
+export type CredentialTagData = CredentialItemData[]
+
+export interface CredentialSubmissionProgress {
+  connectedIntegrationIndexes: ReadonlySet<number>
+  savedSecretIndexes: ReadonlySet<number>
+}
+
+export interface CredentialSubmissionPayload {
+  integrations: Array<{ name: string; status: 'connected' | 'skipped' }>
+  secrets: Array<{ name: string; status: 'saved' | 'skipped' }>
+}
+
+/**
+ * Safe user-turn payload emitted by the credential question card. It carries
+ * only the requested provider and environment-variable names; secret values
+ * remain in Sim's credential stores and never enter the transcript.
+ */
+export function formatCredentialSubmissionMessage(
+  data: CredentialTagData,
+  progress?: CredentialSubmissionProgress
+): string {
+  const integrations = data
+    .filter((item) => item.type === 'link' || item.type === 'service_account')
+    .map((item) => item.provider?.trim())
+    .filter((provider): provider is string => Boolean(provider))
+  const secrets = data
+    .filter((item) => item.type === 'secret_input')
+    .map((item) => item.name?.trim())
+    .filter((name): name is string => Boolean(name))
+  const payload: CredentialSubmissionPayload = {
+    integrations: integrations.map((name, index) => ({
+      name,
+      status:
+        !progress || progress.connectedIntegrationIndexes.has(index) ? 'connected' : 'skipped',
+    })),
+    secrets: secrets.map((name, index) => ({
+      name,
+      status: !progress || progress.savedSecretIndexes.has(index) ? 'saved' : 'skipped',
+    })),
+  }
+  return `Credential setup submitted — ${JSON.stringify(payload)}`
+}
+
+export function parseCredentialSubmissionProgress(
+  data: CredentialTagData,
+  content: string
+): CredentialSubmissionPayload | null {
+  const legacyIntegrations = data
+    .filter((item) => item.type === 'link' || item.type === 'service_account')
+    .map((item) => item.provider?.trim())
+    .filter((provider): provider is string => Boolean(provider))
+  const legacySecrets = data
+    .filter((item) => item.type === 'secret_input')
+    .map((item) => item.name?.trim())
+    .filter((name): name is string => Boolean(name))
+  const legacyParts = [
+    legacyIntegrations.length > 0 ? `integrations: ${legacyIntegrations.join(', ')}` : null,
+    legacySecrets.length > 0 ? `secrets: ${legacySecrets.join(', ')}` : null,
+  ].filter((part): part is string => part !== null)
+  const legacyMessage = `Credential setup complete${legacyParts.length > 0 ? ` — ${legacyParts.join('; ')}` : ''}`
+  if (content === legacyMessage) {
+    return {
+      integrations: legacyIntegrations.map((name) => ({ name, status: 'connected' })),
+      secrets: legacySecrets.map((name) => ({ name, status: 'saved' })),
+    }
+  }
+
+  const prefix = 'Credential setup submitted — '
+  if (!content.startsWith(prefix)) return null
+
+  try {
+    const payload = JSON.parse(content.slice(prefix.length)) as CredentialSubmissionPayload
+    const expectedIntegrations = data
+      .filter((item) => item.type === 'link' || item.type === 'service_account')
+      .map((item) => item.provider?.trim())
+      .filter((provider): provider is string => Boolean(provider))
+    const expectedSecrets = data
+      .filter((item) => item.type === 'secret_input')
+      .map((item) => item.name?.trim())
+      .filter((name): name is string => Boolean(name))
+
+    const valid =
+      Array.isArray(payload.integrations) &&
+      payload.integrations.length === expectedIntegrations.length &&
+      payload.integrations.every(
+        (item, index) =>
+          item.name === expectedIntegrations[index] &&
+          (item.status === 'connected' || item.status === 'skipped')
+      ) &&
+      Array.isArray(payload.secrets) &&
+      payload.secrets.length === expectedSecrets.length &&
+      payload.secrets.every(
+        (item, index) =>
+          item.name === expectedSecrets[index] &&
+          (item.status === 'saved' || item.status === 'skipped')
+      )
+    return valid ? payload : null
+  } catch {
+    return null
+  }
+}
+
+export function parseCredentialSubmissionMessage(
+  data: CredentialTagData,
+  content: string
+): boolean {
+  return parseCredentialSubmissionProgress(data, content) !== null
+}
+
 export interface MothershipErrorTagData {
   message: string
   code?: string
@@ -249,7 +370,7 @@ function isUsageUpgradeTagData(value: unknown): value is UsageUpgradeTagData {
   )
 }
 
-function isCredentialTagData(value: unknown): value is CredentialTagData {
+function isCredentialItemData(value: unknown): value is CredentialItemData {
   if (!isRecord(value)) return false
   if (
     typeof value.type !== 'string' ||
@@ -301,6 +422,28 @@ function isCredentialTagData(value: unknown): value is CredentialTagData {
   return typeof value.value === 'string'
 }
 
+/**
+ * Parses a `<credential>` body and normalizes a singleton object to one row.
+ * Empty arrays and arrays containing one invalid control reject the whole card.
+ */
+export function parseCredentialTagBody(body: string): CredentialTagData | null {
+  try {
+    const parsed = JSON.parse(body) as unknown
+    const items = Array.isArray(parsed) ? parsed : [parsed]
+    return items.length > 0 && items.every(isCredentialItemData) ? items : null
+  } catch {
+    return null
+  }
+}
+
+/** Last complete credential batch, used to pair its Submit turn on reload. */
+export function parseLastCredentialTag(content: string): CredentialTagData | null {
+  const matches = content.match(/<credential>([\s\S]*?)<\/credential>/g)
+  if (!matches || matches.length === 0) return null
+  const last = matches[matches.length - 1]
+  return parseCredentialTagBody(last.slice('<credential>'.length, -'</credential>'.length))
+}
+
 function isMothershipErrorTagData(value: unknown): value is MothershipErrorTagData {
   if (!isRecord(value)) return false
   return (
@@ -514,7 +657,7 @@ function parseSpecialTagData(
   }
 
   if (tagName === 'credential') {
-    const data = parseJsonTagBody(body, isCredentialTagData)
+    const data = parseCredentialTagBody(body)
     return data ? { type: 'credential', data } : null
   }
 
@@ -1297,8 +1440,12 @@ export function parseSpecialTags(content: string, isStreaming: boolean): ParsedS
 
 interface SpecialTagsProps {
   segment: Exclude<ContentSegment, { type: 'text' }>
+  /** Stable identity for interaction state owned by this message/tag. */
+  interactionId?: string
   /** Transcript-derived answers for this message's question card (renders the recap). */
   questionAnswers?: string[]
+  /** Transcript-derived status payload for this message's credential card. */
+  credentialSubmission?: CredentialSubmissionPayload
   onOptionSelect?: (id: string) => void
   onQuestionDismiss?: () => void
   onWorkspaceResourceSelect?: (resource: WorkspaceResourceRef) => void
@@ -1310,7 +1457,9 @@ interface SpecialTagsProps {
  */
 export function SpecialTags({
   segment,
+  interactionId,
   questionAnswers,
+  credentialSubmission,
   onOptionSelect,
   onQuestionDismiss,
   onWorkspaceResourceSelect,
@@ -1323,7 +1472,14 @@ export function SpecialTags({
     case 'usage_upgrade':
       return <UsageUpgradeDisplay data={segment.data} />
     case 'credential':
-      return <CredentialDisplay data={segment.data} />
+      return (
+        <CredentialDisplay
+          data={segment.data}
+          interactionId={interactionId}
+          submitted={credentialSubmission}
+          onContinue={onOptionSelect}
+        />
+      )
     case 'mothership-error':
       return <MothershipErrorDisplay data={segment.data} />
     case 'workspace_resource':
@@ -1538,6 +1694,14 @@ function getCredentialIcon(provider: string): React.ComponentType<{ className?:
   return null
 }
 
+function getCredentialProviderDisplayName(provider: string): string {
+  return (
+    getServiceConfigByProviderId(provider)?.name ??
+    OAUTH_PROVIDERS[provider.toLowerCase()]?.name ??
+    provider
+  )
+}
+
 const LockIcon = (props: { className?: string }) => (
   <svg
     className={props.className}
@@ -1563,12 +1727,24 @@ const LockIcon = (props: { className?: string }) => (
  * workspace (default) or personal environment variables under `name` and never
  * flows back through the chat transcript.
  */
-function SecretInputDisplay({ data }: { data: CredentialTagData }) {
+interface CredentialControlProps {
+  data: CredentialItemData
+  controlId?: string
+  embedded?: boolean
+  divided?: boolean
+  secretValue?: string
+  onSecretValueChange?: (value: string) => void
+  onSaved?: () => void
+  onConnected?: () => void
+}
+
+function SecretInputDisplay({ data, divided = false, onSaved }: CredentialControlProps) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const secretName = (data.name ?? '').trim()
   const scope: SecretInputScope = data.scope === 'personal' ? 'personal' : 'workspace'
 
   const [value, setValue] = useState('')
+  const [isFocused, setIsFocused] = useState(false)
   const [saved, setSaved] = useState(false)
 
   const upsertWorkspace = useUpsertWorkspaceEnvironment()
@@ -1604,6 +1780,7 @@ function SecretInputDisplay({ data }: { data: CredentialTagData }) {
       }
       setValue('')
       setSaved(true)
+      onSaved?.()
       toast.success(`Saved ${secretName}`)
     } catch {
       toast.error(`Couldn't save ${secretName}. Please try again.`)
@@ -1617,29 +1794,45 @@ function SecretInputDisplay({ data }: { data: CredentialTagData }) {
   if (!canManage) return null
 
   return (
-    <SecretInput
-      value={value}
-      onChange={setValue}
+    <InteractionCardInputRow
+      divided={divided}
+      type='text'
+      value={isFocused ? value : '•'.repeat(value.length)}
       placeholder={`Paste ${secretName}`}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault()
+      autoComplete='off'
+      aria-label={secretName}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      onChange={(event) => {
+        if (isFocused) setValue(event.target.value)
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') {
+          event.currentTarget.blur()
+          return
+        }
+        if (event.key === 'Enter' && canSave) {
+          event.preventDefault()
           void handleSave()
         }
       }}
-      endAdornment={
+      trailing={
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <Button
+            <button
               type='button'
-              variant='quiet'
-              size='icon'
               onClick={() => void handleSave()}
               disabled={!canSave}
               aria-label='Save'
+              className='disabled:cursor-default'
             >
-              <ArrowRight className='size-[13px]' />
-            </Button>
+              <ArrowRight
+                className={cn(
+                  'size-[16px] shrink-0 transition-colors',
+                  canSave ? 'text-[var(--text-body)]' : 'text-[var(--text-icon)]'
+                )}
+              />
+            </button>
           </Tooltip.Trigger>
           <Tooltip.Content>{isSaving ? 'Saving…' : 'Save'}</Tooltip.Content>
         </Tooltip.Root>
@@ -1648,6 +1841,43 @@ function SecretInputDisplay({ data }: { data: CredentialTagData }) {
   )
 }
 
+interface CredentialSecretInputRowProps {
+  name: string
+  value: string
+  divided?: boolean
+  onChange: (value: string) => void
+}
+
+/** Secret draft field for the unified card; the card's final Submit owns persistence. */
+function CredentialSecretInputRow({
+  name,
+  value,
+  divided = false,
+  onChange,
+}: CredentialSecretInputRowProps) {
+  const [isFocused, setIsFocused] = useState(false)
+
+  return (
+    <InteractionCardInputRow
+      divided={divided}
+      type='text'
+      value={isFocused ? value : '•'.repeat(value.length)}
+      placeholder={`Paste ${name}`}
+      autoComplete='off'
+      aria-label={name}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      onChange={(event) => {
+        const maskedValue = '•'.repeat(value.length)
+        if (isFocused || event.target.value !== maskedValue) onChange(event.target.value)
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') event.currentTarget.blur()
+      }}
+    />
+  )
+}
+
 /**
  * Folder icon for the local-folder grant chip (matches the credential chip
  * icon sizing).
@@ -1670,7 +1900,7 @@ const FolderGrantIcon = ({ className }: { className?: string }) => (
  * same flow as the Desktop settings folder picker). Renders nothing outside the
  * desktop app — there is no local filesystem bridge to grant against.
  */
-function FolderAccessDisplay({ data }: { data: CredentialTagData }) {
+function FolderAccessDisplay({ data }: { data: CredentialItemData }) {
   const [picking, setPicking] = useState(false)
   const [grantedName, setGrantedName] = useState<string | null>(null)
 
@@ -1729,7 +1959,7 @@ function FolderAccessDisplay({ data }: { data: CredentialTagData }) {
  * agent browser back to Sim. Renders nothing outside the desktop app — there
  * is no agent browser to hand back.
  */
-function BrowserTakeoverDisplay({ data }: { data: CredentialTagData }) {
+function BrowserTakeoverDisplay({ data }: { data: CredentialItemData }) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const { chatId } = useChatSurface()
   const [handedBack, setHandedBack] = useState(false)
@@ -1770,10 +2000,16 @@ function BrowserTakeoverDisplay({ data }: { data: CredentialTagData }) {
  * the integrations page — the user stays in the conversation that asked for
  * the credential, and comes back to it with the credential in hand.
  */
-function ServiceAccountConnectDisplay({ data }: { data: CredentialTagData }) {
+function ServiceAccountConnectDisplay({
+  data,
+  embedded = false,
+  divided = false,
+  onConnected,
+}: CredentialControlProps) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const { canEdit } = useUserPermissionsContext()
   const [open, setOpen] = useState(false)
+  const [locallyConnected, setLocallyConnected] = useState(false)
 
   const match = useMemo(
     () => (data.provider ? resolveServiceAccountIntegration(data.provider) : null),
@@ -1790,6 +2026,7 @@ function ServiceAccountConnectDisplay({ data }: { data: CredentialTagData }) {
   // account in place rather than creating a new one — the modal keeps its id.
   const reconnectCredentialId = data.credentialId
   const { data: reconnectCredential } = useWorkspaceCredential(reconnectCredentialId)
+  const connected = locallyConnected
 
   // Creating a credential mutates the workspace — hide it from read-only
   // members, and honour the provider's own preview gate (custom Slack bots
@@ -1800,17 +2037,31 @@ function ServiceAccountConnectDisplay({ data }: { data: CredentialTagData }) {
   const label = reconnectCredentialId
     ? `Reconnect ${reconnectCredential?.displayName ?? target.serviceName}`
     : `${target.label} for ${target.serviceName}`
+  const displayLabel = connected ? `Connected ${target.serviceName}` : label
 
   return (
     <>
       <button
         type='button'
-        onClick={() => setOpen(true)}
-        className='flex w-full items-center gap-2 rounded-2xl border border-[var(--border-1)] px-3 py-2.5 text-left transition-colors hover-hover:bg-[var(--surface-5)]'
+        onClick={() => {
+          if (!connected) setOpen(true)
+        }}
+        disabled={connected}
+        className={cn(
+          embedded
+            ? INTERACTION_CARD_ROW_CLASSES
+            : 'flex w-full items-center gap-2 rounded-2xl border border-[var(--border-1)] px-3 py-2.5 text-left transition-colors',
+          embedded && divided && 'border-t',
+          'hover-hover:bg-[var(--surface-5)]'
+        )}
       >
         {createElement(target.serviceIcon, { className: 'size-[16px] shrink-0' })}
-        <span className='flex-1 text-[var(--text-body)] text-sm'>{label}</span>
-        <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+        <span className='flex-1 text-[var(--text-body)] text-sm'>{displayLabel}</span>
+        {connected ? (
+          <Check className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+        ) : (
+          <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+        )}
       </button>
       {open && (
         <Suspense fallback={null}>
@@ -1823,6 +2074,10 @@ function ServiceAccountConnectDisplay({ data }: { data: CredentialTagData }) {
             serviceIcon={target.serviceIcon}
             credentialId={reconnectCredentialId}
             credentialDisplayName={reconnectCredential?.displayName ?? undefined}
+            onCreated={() => {
+              setLocallyConnected(true)
+              onConnected?.()
+            }}
           />
         </Suspense>
       )}
@@ -1830,19 +2085,30 @@ function ServiceAccountConnectDisplay({ data }: { data: CredentialTagData }) {
   )
 }
 
-function CredentialLinkDisplay({ data }: { data: CredentialTagData }) {
+function CredentialLinkDisplay({
+  data,
+  controlId = 'credential-link',
+  embedded = false,
+  divided = false,
+  onConnected,
+}: CredentialControlProps) {
   const { canEdit } = useUserPermissionsContext()
-
-  // A connect URL carrying a credentialId re-authorizes that existing
-  // credential in place (reconnect) rather than creating a new one.
-  const reconnectCredentialId = useMemo(() => {
-    if (!data.value) return undefined
-    try {
-      return new URL(data.value).searchParams.get('credentialId') ?? undefined
-    } catch {
-      return undefined
-    }
-  }, [data.value])
+  const integrationName = getCredentialProviderDisplayName(data.provider ?? '')
+  const {
+    reconnectCredentialId,
+    status,
+    connected,
+    connectedFromAttempt,
+    hasExistingCredential,
+    isReady,
+    onConnectClick,
+  } = useOAuthChipConnection({
+    connectUrl: data.value,
+    provider: data.provider,
+    displayName: integrationName,
+    controlId,
+    onConnected,
+  })
   const { data: reconnectCredential } = useWorkspaceCredential(reconnectCredentialId)
 
   // Connecting a credential mutates the workspace — hide it from read-only members.
@@ -1851,47 +2117,48 @@ function CredentialLinkDisplay({ data }: { data: CredentialTagData }) {
   // render it as a clickable link when it resolves to a real http(s) URL.
   if (!data.value || !isSafeHttpUrl(data.value)) return null
   const Icon = getCredentialIcon(data.provider) ?? LockIcon
-  const integrationName =
-    getServiceConfigByProviderId(data.provider)?.name ??
-    OAUTH_PROVIDERS[data.provider.toLowerCase()]?.name ??
-    data.provider
   const label = reconnectCredentialId
     ? `Reconnect ${reconnectCredential?.displayName ?? integrationName}`
-    : `Connect ${integrationName}`
-
-  /**
-   * Desktop app: OAuth cannot run in an embedded window — not in the app
-   * window (better-auth binds the flow's state to the initiating browser's
-   * cookies) and not in the Sim browser panel (its partition isn't signed in
-   * to Sim, and Google/Microsoft reject embedded user agents outright). So
-   * the chip hands the whole flow to the system browser via the connect
-   * handoff, carrying the workspace/credential scope from the authorize URL;
-   * completion returns through the app's loopback and refreshes credentials.
-   */
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    const bridge = getDesktopBridge()
-    if (!bridge?.beginOAuthConnect || !data.value) return
-    event.preventDefault()
-    const url = new URL(data.value)
-    const providerId = url.searchParams.get('providerId') ?? data.provider
-    if (!providerId) return
-    void bridge.beginOAuthConnect(providerId, {
-      workspaceId: url.searchParams.get('workspaceId') ?? undefined,
-      credentialId: url.searchParams.get('credentialId') ?? undefined,
-    })
-  }
+    : hasExistingCredential
+      ? `Connect another ${integrationName}`
+      : `Connect ${integrationName}`
+  const retryLabel = reconnectCredentialId
+    ? `Not connected — reconnect ${reconnectCredential?.displayName ?? integrationName}`
+    : hasExistingCredential
+      ? `Not connected — connect another ${integrationName}`
+      : `Not connected — connect ${integrationName}`
+  const displayLabel = connected
+    ? `Connected ${integrationName}`
+    : !isReady
+      ? `Checking ${integrationName} connections…`
+      : status === 'pending'
+        ? `Waiting for ${integrationName} connection…`
+        : status === 'failed'
+          ? retryLabel
+          : label
 
   return (
     <a
       href={data.value}
       target='_blank'
       rel='noopener noreferrer'
-      onClick={handleClick}
-      className='flex items-center gap-2 rounded-2xl border border-[var(--border-1)] px-3 py-2.5 transition-colors hover-hover:bg-[var(--surface-5)]'
+      onClick={onConnectClick}
+      aria-disabled={!isReady || connectedFromAttempt}
+      className={cn(
+        embedded
+          ? INTERACTION_CARD_ROW_CLASSES
+          : 'flex items-center gap-2 rounded-2xl border border-[var(--border-1)] px-3 py-2.5 transition-colors',
+        embedded && divided && 'border-t',
+        'hover-hover:bg-[var(--surface-5)]'
+      )}
     >
       {createElement(Icon, { className: 'size-[16px] shrink-0' })}
-      <span className='flex-1 text-[var(--text-body)] text-sm'>{label}</span>
-      <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+      <span className='flex-1 text-[var(--text-body)] text-sm'>{displayLabel}</span>
+      {connected ? (
+        <Check className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+      ) : (
+        <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+      )}
     </a>
   )
 }
@@ -1904,7 +2171,7 @@ function CredentialLinkDisplay({ data }: { data: CredentialTagData }) {
  * handoff they are done; the terminal id rides in `value` so the click reaches
  * the right shell. Renders nothing outside the desktop app.
  */
-function TerminalHandoffDisplay({ data }: { data: CredentialTagData }) {
+function TerminalHandoffDisplay({ data }: { data: CredentialItemData }) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const { chatId } = useChatSurface()
   const [handedBack, setHandedBack] = useState(false)
@@ -1937,9 +2204,57 @@ function TerminalHandoffDisplay({ data }: { data: CredentialTagData }) {
   )
 }
 
-export function CredentialDisplay({ data }: { data: CredentialTagData }) {
+const CREDENTIAL_CARD_TYPES: ReadonlySet<CredentialTagType> = new Set([
+  'secret_input',
+  'link',
+  'service_account',
+  'sim_key',
+])
+
+function isCredentialCardItemVisible(item: CredentialItemData, canEdit: boolean): boolean {
+  if (item.type === 'sim_key') return true
+  if (item.type === 'secret_input') return item.scope === 'personal' || canEdit
+  if (item.type === 'link') {
+    return canEdit && Boolean(item.provider) && Boolean(item.value && isSafeHttpUrl(item.value))
+  }
+  return canEdit
+}
+
+/** Whether a terminal credential tag produces the shared question-style card. */
+export function credentialTagHasVisibleCard(data: CredentialTagData, canEdit: boolean): boolean {
+  return (
+    data.length > 0 &&
+    data.every((item) => CREDENTIAL_CARD_TYPES.has(item.type)) &&
+    data.some((item) => isCredentialCardItemVisible(item, canEdit))
+  )
+}
+
+function CredentialItemDisplay({
+  data,
+  controlId,
+  embedded = false,
+  divided = false,
+  secretValue,
+  onSecretValueChange,
+  onSaved,
+  onConnected,
+}: CredentialControlProps) {
   if (data.type === 'secret_input') {
-    return <SecretInputDisplay data={data} />
+    const secretName = data.name?.trim()
+    if (embedded) {
+      if (!secretName || !onSecretValueChange) return null
+      return (
+        <CredentialSecretInputRow
+          name={secretName}
+          value={secretValue ?? ''}
+          divided={divided}
+          onChange={onSecretValueChange}
+        />
+      )
+    }
+    return (
+      <SecretInputDisplay data={data} embedded={embedded} divided={divided} onSaved={onSaved} />
+    )
   }
 
   if (data.type === 'folder_access') {
@@ -1955,11 +2270,26 @@ export function CredentialDisplay({ data }: { data: CredentialTagData }) {
   }
 
   if (data.type === 'link') {
-    return <CredentialLinkDisplay data={data} />
+    return (
+      <CredentialLinkDisplay
+        data={data}
+        controlId={controlId}
+        embedded={embedded}
+        divided={divided}
+        onConnected={onConnected}
+      />
+    )
   }
 
   if (data.type === 'service_account') {
-    return <ServiceAccountConnectDisplay data={data} />
+    return (
+      <ServiceAccountConnectDisplay
+        data={data}
+        embedded={embedded}
+        divided={divided}
+        onConnected={onConnected}
+      />
+    )
   }
 
   if (data.type === 'sim_key') {
@@ -1972,6 +2302,253 @@ export function CredentialDisplay({ data }: { data: CredentialTagData }) {
   return null
 }
 
+/**
+ * Credential input and OAuth controls use the same InteractionCard primitives
+ * as QuestionDisplay. Integrations come first and secrets follow in one card
+ * with one Submit; legacy/system actions retain their standalone presentation.
+ */
+function CredentialInputCard({
+  data,
+  interactionId,
+  submitted,
+  onContinue,
+}: {
+  data: CredentialTagData
+  interactionId?: string
+  submitted?: CredentialSubmissionPayload
+  onContinue?: (message: string) => void
+}) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const { canEdit } = useUserPermissionsContext()
+  const upsertWorkspace = useUpsertWorkspaceEnvironment()
+  const savePersonal = useSavePersonalEnvironment()
+  const personalQuery = usePersonalEnvironment()
+  const [secretDrafts, setSecretDrafts] = useState<Record<number, string>>({})
+  const [savedSecretRows, setSavedSecretRows] = useState<Set<number>>(() => new Set())
+  const [connectedIntegrationRows, setConnectedIntegrationRows] = useState<Set<number>>(
+    () => new Set()
+  )
+  const [locallySubmitted, setLocallySubmitted] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  let integrationIndex = 0
+  let secretIndex = 0
+  const indexedRows = data.map((item, dataIndex) => ({
+    item,
+    dataIndex,
+    integrationIndex:
+      item.type === 'link' || item.type === 'service_account' ? integrationIndex++ : undefined,
+    secretIndex: item.type === 'secret_input' ? secretIndex++ : undefined,
+  }))
+  const visibleRows = indexedRows.filter(({ item }) => isCredentialCardItemVisible(item, canEdit))
+  if (visibleRows.length === 0) return null
+
+  const integrationRows = visibleRows.filter(
+    ({ item }) => item.type === 'link' || item.type === 'service_account'
+  )
+  const secretRows = visibleRows.filter(
+    ({ item }) => item.type === 'secret_input' || item.type === 'sim_key'
+  )
+  const requiredSecretRows = secretRows.filter(({ item }) => item.type === 'secret_input')
+  const title =
+    integrationRows.length > 0 && secretRows.length > 0
+      ? 'Set up credentials'
+      : integrationRows.length > 0
+        ? 'Connect integrations'
+        : requiredSecretRows.length > 0
+          ? 'Add secrets'
+          : 'API key'
+  const rows = [
+    ...integrationRows.map(({ item, dataIndex, integrationIndex }, index) => (
+      <CredentialItemDisplay
+        key={`${item.type}-${item.provider ?? dataIndex}-${dataIndex}`}
+        data={item}
+        controlId={`${interactionId ?? 'credential-card'}:${dataIndex}`}
+        embedded
+        divided={index > 0}
+        onConnected={() =>
+          setConnectedIntegrationRows((current) => {
+            if (integrationIndex === undefined || current.has(integrationIndex)) return current
+            const next = new Set(current)
+            next.add(integrationIndex)
+            return next
+          })
+        }
+      />
+    )),
+    ...secretRows.map(({ item, dataIndex, secretIndex }, index) => {
+      return (
+        <CredentialItemDisplay
+          key={`${item.type}-${item.name ?? dataIndex}-${dataIndex}`}
+          data={item}
+          embedded
+          divided={integrationRows.length > 0 || index > 0}
+          secretValue={
+            item.type === 'secret_input' ? (secretDrafts[secretIndex ?? -1] ?? '') : undefined
+          }
+          onSecretValueChange={
+            item.type === 'secret_input' && secretIndex !== undefined
+              ? (value) =>
+                  setSecretDrafts((current) => ({
+                    ...current,
+                    [secretIndex]: value,
+                  }))
+              : undefined
+          }
+        />
+      )
+    }),
+  ]
+
+  const submitCredentialSetup = async (): Promise<boolean> => {
+    if (!onContinue) return false
+
+    const workspaceVariables: Record<string, string> = {}
+    const personalVariables: Record<string, string> = {}
+    const enteredSecretIndexes: number[] = []
+
+    for (const { item, secretIndex } of requiredSecretRows) {
+      if (secretIndex === undefined) continue
+      const name = item.name?.trim()
+      const value = secretDrafts[secretIndex] ?? ''
+      if (!name || value.trim().length === 0) continue
+      const target = item.scope === 'personal' ? personalVariables : workspaceVariables
+      target[name] = value
+      enteredSecretIndexes.push(secretIndex)
+    }
+
+    try {
+      const saves: Promise<unknown>[] = []
+      if (Object.keys(workspaceVariables).length > 0) {
+        saves.push(upsertWorkspace.mutateAsync({ workspaceId, variables: workspaceVariables }))
+      }
+      if (Object.keys(personalVariables).length > 0) {
+        saves.push(
+          (async () => {
+            const { data: latest } = await personalQuery.refetch()
+            const merged: Record<string, string> = {}
+            for (const [key, entry] of Object.entries(latest ?? personalQuery.data ?? {})) {
+              merged[key] = entry.value
+            }
+            Object.assign(merged, personalVariables)
+            await savePersonal.mutateAsync({ variables: merged })
+          })()
+        )
+      }
+      await Promise.all(saves)
+    } catch {
+      toast.error(`Couldn't save secrets. Please try again.`)
+      return false
+    }
+
+    const nextSavedSecretRows = new Set(savedSecretRows)
+    for (const index of enteredSecretIndexes) nextSavedSecretRows.add(index)
+    setSavedSecretRows(nextSavedSecretRows)
+
+    onContinue(
+      formatCredentialSubmissionMessage(data, {
+        connectedIntegrationIndexes: connectedIntegrationRows,
+        savedSecretIndexes: nextSavedSecretRows,
+      })
+    )
+    return true
+  }
+
+  const needsContinuation = integrationRows.length > 0 || requiredSecretRows.length > 0
+  const credentialSummary = [
+    ...integrationRows.map(({ item, integrationIndex }) => ({
+      label: getCredentialProviderDisplayName(item.provider ?? 'Integration'),
+      status: (
+        submitted
+          ? submitted.integrations[integrationIndex ?? -1]?.status === 'connected'
+          : connectedIntegrationRows.has(integrationIndex ?? -1)
+      )
+        ? ('Connected' as const)
+        : ('Skipped' as const),
+    })),
+    ...secretRows.map(({ item, secretIndex }) => {
+      if (item.type === 'sim_key') {
+        return { label: item.name ?? 'Sim API key', status: 'Added' as const }
+      }
+      const saved = submitted
+        ? submitted.secrets[secretIndex ?? -1]?.status === 'saved'
+        : savedSecretRows.has(secretIndex ?? -1)
+      return {
+        label: item.name ?? 'Secret',
+        status: saved ? ('Added' as const) : ('Skipped' as const),
+      }
+    }),
+  ]
+
+  if (submitted || locallySubmitted) {
+    return (
+      <InteractionCardRecap
+        items={credentialSummary.map((item) => ({ label: item.label, values: [item.status] }))}
+      />
+    )
+  }
+
+  const handleSubmit = async () => {
+    if (isSubmitting) return
+    setIsSubmitting(true)
+    try {
+      if (await submitCredentialSetup()) setLocallySubmitted(true)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <InteractionCard title={title}>
+      <div className='flex flex-col'>
+        {rows}
+        {needsContinuation && onContinue && (
+          <InteractionCardActionRow
+            label='Submit'
+            disabled={isSubmitting}
+            onClick={() => void handleSubmit()}
+          />
+        )}
+      </div>
+    </InteractionCard>
+  )
+}
+
+export function CredentialDisplay({
+  data,
+  interactionId,
+  submitted,
+  onContinue,
+}: {
+  data: CredentialTagData
+  interactionId?: string
+  submitted?: CredentialSubmissionPayload
+  onContinue?: (message: string) => void
+}) {
+  const usesCredentialCard = data.every((item) => CREDENTIAL_CARD_TYPES.has(item.type))
+
+  if (usesCredentialCard) {
+    return (
+      <CredentialInputCard
+        data={data}
+        interactionId={interactionId}
+        submitted={submitted}
+        onContinue={onContinue}
+      />
+    )
+  }
+
+  return (
+    <div className={cn(data.length > 1 && 'space-y-3')}>
+      {data.map((item, index) => (
+        <CredentialItemDisplay
+          key={`${item.type}-${item.provider ?? item.name ?? index}`}
+          data={item}
+        />
+      ))}
+    </div>
+  )
+}
+
 function MothershipErrorDisplay({ data }: { data: MothershipErrorTagData }) {
   const detail = data.code ? `${data.message} (${data.code})` : data.message
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
new file mode 100644
index 00000000000..0cf00a30a3c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
@@ -0,0 +1,352 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useParams } from 'next/navigation'
+import {
+  addOAuthChatAttemptToAuthorizeUrl,
+  createOAuthChatAttempt,
+  getOAuthCredentialBaseline,
+  hasOAuthCredentialChanged,
+  hasOAuthCredentialForTarget,
+  OAUTH_CHAT_ATTEMPT_EVENT,
+  OAUTH_CHAT_ATTEMPT_PARAM,
+  type OAuthChatAttempt,
+  type OAuthChatAttemptStatus,
+  readLatestOAuthChatAttempt,
+  readOAuthChatAttempt,
+  setActiveDesktopOAuthChatAttempt,
+  setOAuthChatAttemptStatus,
+} from '@/lib/credentials/oauth-chat-attempt'
+import { getDesktopBridge } from '@/lib/desktop'
+import type { OAuthProvider } from '@/lib/oauth/types'
+import { parseProvider } from '@/lib/oauth/utils'
+import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
+
+interface UseOAuthChipConnectionParams {
+  /** Authorize URL streamed by the agent; provider and reconnect scope are read from it. */
+  connectUrl?: string
+  /** Provider slug from the tag, used when the URL carries none. */
+  provider?: string
+  /** Human-facing integration name, stored on the attempt for its toasts. */
+  displayName: string
+  /** Identifies the row within the message, so sibling chips stay independent. */
+  controlId: string
+  onConnected?: () => void
+}
+
+export interface OAuthChipConnection {
+  providerId: string
+  /** Present when the URL re-authorizes an existing credential in place. */
+  reconnectCredentialId?: string
+  status: OAuthChatAttemptStatus | null
+  /** True when the row should read as connected, from any signal. */
+  connected: boolean
+  /**
+   * True only when *this row's* attempt completed. Workspace-wide observation
+   * cannot be attributed to one row, so this — not {@link connected} — is what
+   * may lock the control.
+   */
+  connectedFromAttempt: boolean
+  /** The workspace already holds a credential this row would connect. */
+  hasExistingCredential: boolean
+  /** The credential list has loaded, so a click can capture a real baseline. */
+  isReady: boolean
+  onConnectClick: (event: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+/**
+ * Tracks whether the credential a chat credential chip offers is connected.
+ *
+ * Connection is never inferred from a credential merely existing — the row
+ * records an *attempt* when clicked, capturing a baseline of the credentials
+ * that already matched, and the OAuth return verifies against that baseline.
+ * The attempt is keyed by workspace, provider, reconnect target, and
+ * `controlId`, so it survives a reload and cannot be claimed by a sibling row
+ * for the same provider.
+ */
+export function useOAuthChipConnection({
+  connectUrl,
+  provider,
+  displayName,
+  controlId,
+  onConnected,
+}: UseOAuthChipConnectionParams): OAuthChipConnection {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+
+  // A connect URL carrying a credentialId re-authorizes that existing
+  // credential in place (reconnect) rather than creating a new one.
+  const reconnectCredentialId = useMemo(() => {
+    if (!connectUrl) return undefined
+    try {
+      return new URL(connectUrl).searchParams.get('credentialId') ?? undefined
+    } catch {
+      return undefined
+    }
+  }, [connectUrl])
+
+  const providerId = useMemo(() => {
+    if (!connectUrl) return provider ?? ''
+    try {
+      const url = new URL(connectUrl)
+      if (url.pathname === '/api/auth/instagram/authorize') return 'instagram'
+      if (url.pathname === '/api/auth/shopify/authorize') return 'shopify'
+      if (url.pathname === '/api/auth/trello/authorize') return 'trello'
+      return url.searchParams.get('providerId') ?? provider ?? ''
+    } catch {
+      return provider ?? ''
+    }
+  }, [connectUrl, provider])
+
+  const baseProviderId = parseProvider(providerId as OAuthProvider).baseProvider
+  const {
+    data: workspaceOAuthCredentials = [],
+    isFetched,
+    refetch: refetchWorkspaceOAuthCredentials,
+  } = useWorkspaceCredentials({
+    workspaceId,
+    type: 'oauth',
+    enabled: Boolean(providerId),
+  })
+
+  const [activeAttemptId, setActiveAttemptId] = useState<string | undefined>(() => {
+    if (typeof window === 'undefined') return undefined
+    return new URL(window.location.href).searchParams.get(OAUTH_CHAT_ATTEMPT_PARAM) ?? undefined
+  })
+  const [connectionStatus, setConnectionStatus] = useState<OAuthChatAttemptStatus | null>(null)
+  const [connectedFromWorkspaceChange, setConnectedFromWorkspaceChange] = useState(false)
+  const onConnectedRef = useRef(onConnected)
+  const oauthWindowWasAwayRef = useRef(false)
+  const workspaceCredentialBaselineRef = useRef<{
+    scope: string
+    baseline: ReturnType<typeof getOAuthCredentialBaseline>
+  } | null>(null)
+
+  const credentialTarget = useMemo(
+    () => ({ providerId, baseProviderId, credentialId: reconnectCredentialId }),
+    [baseProviderId, providerId, reconnectCredentialId]
+  )
+  const credentialScope = `${workspaceId}:${providerId}:${reconnectCredentialId ?? ''}`
+  const hasExistingCredential = hasOAuthCredentialForTarget(
+    credentialTarget,
+    workspaceOAuthCredentials
+  )
+  const connectedFromAttempt = connectionStatus === 'connected'
+  const connected = connectedFromAttempt || connectedFromWorkspaceChange
+
+  useEffect(() => {
+    onConnectedRef.current = onConnected
+  }, [onConnected])
+
+  /**
+   * A credential for this row can also appear without the row launching it —
+   * the integrations page in another tab, or a desktop flow that never comes
+   * back through the return URL. Diffing the workspace list against the
+   * baseline captured for this scope surfaces that.
+   *
+   * This signal is workspace-wide, so it cannot be attributed to one row:
+   * sibling chips for the same provider all see the same change. It therefore
+   * only ever *shows* the row as satisfied — {@link connectedFromAttempt} is
+   * what locks it, so a second same-provider row stays clickable.
+   */
+  useEffect(() => {
+    if (!isFetched) return
+    const storedBaseline = workspaceCredentialBaselineRef.current
+    if (!storedBaseline || storedBaseline.scope !== credentialScope) {
+      workspaceCredentialBaselineRef.current = {
+        scope: credentialScope,
+        baseline: getOAuthCredentialBaseline(credentialTarget, workspaceOAuthCredentials),
+      }
+      setConnectedFromWorkspaceChange(false)
+      return
+    }
+    // Workspace-wide observation can reliably identify a newly-added account
+    // by id. It cannot prove that an existing credential was reauthorized (an
+    // unrelated metadata edit can also update it), so reconnect completion is
+    // accepted only from the OAuth return attempt verifier.
+    if (reconnectCredentialId) {
+      setConnectedFromWorkspaceChange(false)
+      return
+    }
+    // Recomputed rather than latched, so a credential that goes away (deleted,
+    // access revoked) takes the row's connected state with it.
+    setConnectedFromWorkspaceChange(
+      hasOAuthCredentialChanged(
+        { ...credentialTarget, ...storedBaseline.baseline },
+        workspaceOAuthCredentials
+      )
+    )
+  }, [
+    credentialScope,
+    credentialTarget,
+    isFetched,
+    reconnectCredentialId,
+    workspaceOAuthCredentials,
+  ])
+
+  /**
+   * This row's attempt: the one named by the return URL when we came back from
+   * the provider, else the last one stored for this exact row. The stored
+   * lookup is what survives a reload — and what covers the transcript
+   * rendering only after the return hook has already stripped the URL param.
+   * Both are scoped to the row, so a sibling chip for the same provider can
+   * never claim this one's result.
+   */
+  const readRowAttempt = useCallback((): OAuthChatAttempt | null => {
+    const active = activeAttemptId ? readOAuthChatAttempt(activeAttemptId) : null
+    if (
+      active &&
+      active.workspaceId === workspaceId &&
+      active.providerId === providerId &&
+      active.credentialId === reconnectCredentialId &&
+      active.controlId === controlId
+    ) {
+      return active
+    }
+    return readLatestOAuthChatAttempt({
+      workspaceId,
+      providerId,
+      controlId,
+      credentialId: reconnectCredentialId,
+    })
+  }, [activeAttemptId, controlId, providerId, reconnectCredentialId, workspaceId])
+
+  useEffect(() => {
+    const syncStatus = () => setConnectionStatus(readRowAttempt()?.status ?? null)
+    window.addEventListener(OAUTH_CHAT_ATTEMPT_EVENT, syncStatus)
+    window.addEventListener('storage', syncStatus)
+    syncStatus()
+    return () => {
+      window.removeEventListener(OAUTH_CHAT_ATTEMPT_EVENT, syncStatus)
+      window.removeEventListener('storage', syncStatus)
+    }
+  }, [readRowAttempt])
+
+  useEffect(() => {
+    const markAway = () => {
+      oauthWindowWasAwayRef.current = true
+    }
+    const verifyAfterReturn = async () => {
+      if (!oauthWindowWasAwayRef.current || document.visibilityState !== 'visible') return
+      oauthWindowWasAwayRef.current = false
+      const attempt = readRowAttempt()
+      const result = await refetchWorkspaceOAuthCredentials()
+      const credentials = result.data ?? []
+
+      // Refetching on every return closes the other-tab gap even when this row
+      // did not launch the connection. Query state normally drives the effect
+      // above; updating here as well makes the result immediate and deterministic.
+      const storedBaseline = workspaceCredentialBaselineRef.current
+      if (!reconnectCredentialId && storedBaseline?.scope === credentialScope) {
+        setConnectedFromWorkspaceChange(
+          hasOAuthCredentialChanged(
+            { ...credentialTarget, ...storedBaseline.baseline },
+            credentials
+          )
+        )
+      }
+
+      if (!attempt || attempt.status !== 'pending') return
+      // A reconnect is verified by the callback path, which has proof that the
+      // OAuth flow returned. A plain focus event cannot distinguish it from an
+      // unrelated edit to the same credential.
+      const attemptConnected = reconnectCredentialId
+        ? false
+        : hasOAuthCredentialChanged(attempt, credentials)
+      setOAuthChatAttemptStatus(attempt.id, attemptConnected ? 'connected' : 'failed')
+    }
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') markAway()
+      else void verifyAfterReturn()
+    }
+
+    window.addEventListener('blur', markAway)
+    window.addEventListener('focus', verifyAfterReturn)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => {
+      window.removeEventListener('blur', markAway)
+      window.removeEventListener('focus', verifyAfterReturn)
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [
+    credentialScope,
+    credentialTarget,
+    readRowAttempt,
+    reconnectCredentialId,
+    refetchWorkspaceOAuthCredentials,
+  ])
+
+  useEffect(() => {
+    if (connected) onConnectedRef.current?.()
+  }, [connected])
+
+  /**
+   * Desktop app: OAuth cannot run in an embedded window — not in the app
+   * window (better-auth binds the flow's state to the initiating browser's
+   * cookies) and not in the Sim browser panel (its partition isn't signed in
+   * to Sim, and Google/Microsoft reject embedded user agents outright). So
+   * the chip hands the whole flow to the system browser via the connect
+   * handoff, carrying the workspace/credential scope from the authorize URL;
+   * completion returns through the app's loopback and refreshes credentials.
+   */
+  const onConnectClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (!connectUrl || !isFetched || connectedFromAttempt) {
+        event.preventDefault()
+        return
+      }
+      const attempt = createOAuthChatAttempt({
+        workspaceId,
+        providerId,
+        baseProviderId,
+        displayName,
+        controlId,
+        credentialId: reconnectCredentialId,
+        ...getOAuthCredentialBaseline(credentialTarget, workspaceOAuthCredentials),
+      })
+      setActiveAttemptId(attempt.id)
+      setConnectionStatus('pending')
+
+      const bridge = getDesktopBridge()
+      if (bridge?.beginOAuthConnect) {
+        event.preventDefault()
+        const url = new URL(connectUrl)
+        setActiveDesktopOAuthChatAttempt(attempt.id)
+        void bridge
+          .beginOAuthConnect(providerId, {
+            workspaceId: url.searchParams.get('workspaceId') ?? workspaceId,
+            credentialId: url.searchParams.get('credentialId') ?? undefined,
+          })
+          .then((opened) => {
+            if (!opened) setOAuthChatAttemptStatus(attempt.id, 'failed')
+          })
+        return
+      }
+
+      event.currentTarget.href = addOAuthChatAttemptToAuthorizeUrl(connectUrl, attempt.id)
+    },
+    [
+      baseProviderId,
+      connectUrl,
+      connectedFromAttempt,
+      controlId,
+      credentialTarget,
+      displayName,
+      isFetched,
+      providerId,
+      reconnectCredentialId,
+      workspaceId,
+      workspaceOAuthCredentials,
+    ]
+  )
+
+  return {
+    providerId,
+    reconnectCredentialId,
+    status: connectionStatus,
+    connected,
+    connectedFromAttempt,
+    hasExistingCredential,
+    isReady: isFetched,
+    onConnectClick,
+  }
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index f0293c42872..a2462865053 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -21,6 +21,7 @@ import {
   humanizeToolName,
 } from '@/lib/copilot/tools/tool-display'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
+import type { CredentialSubmissionPayload } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 import type { ContentBlock, OptionItem, ToolCallData } from '../../types'
 import { SUBAGENT_LABELS } from '../../types'
 import type { AgentGroupItem } from './components'
@@ -789,6 +790,7 @@ export function deriveThinkingLabel(blocks: ContentBlock[]): string | null {
 interface MessageContentProps {
   blocks: ContentBlock[]
   fallbackContent: string
+  messageId?: string
   isStreaming: boolean
   /**
    * True for the last message in the transcript. The last turn keeps a
@@ -798,6 +800,8 @@ interface MessageContentProps {
   isLast?: boolean
   /** Transcript-derived answers for this message's question card (renders the recap). */
   questionAnswers?: string[]
+  /** Transcript-derived status payload for this message's credential card. */
+  credentialSubmission?: CredentialSubmissionPayload
   onOptionSelect?: (id: string) => void
   onQuestionDismiss?: () => void
   onPhaseChange?: (phase: MessagePhase) => void
@@ -814,9 +818,11 @@ interface MessageContentProps {
 function MessageContentInner({
   blocks,
   fallbackContent,
+  messageId,
   isStreaming = false,
   isLast = false,
   questionAnswers,
+  credentialSubmission,
   onOptionSelect,
   onQuestionDismiss,
   onPhaseChange,
@@ -912,12 +918,14 @@ function MessageContentInner({
                 <ChatContent
                   key={segment.id}
                   content={segment.content}
+                  messageId={messageId}
                   isStreaming={shouldSmoothTextSegment({
                     isStreaming,
                     segmentIndex: i,
                     segmentCount: segments.length,
                   })}
                   questionAnswers={questionAnswers}
+                  credentialSubmission={credentialSubmission}
                   onOptionSelect={onOptionSelect}
                   onQuestionDismiss={onQuestionDismiss}
                   onWorkspaceResourceSelect={onWorkspaceResourceSelect}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.test.ts
index 49ae8bc7e06..a28a0a8347a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.test.ts
@@ -10,7 +10,7 @@ describe('shouldShowAssistantMessageActions', () => {
       shouldShowAssistantMessageActions({
         phase: 'settled',
         hasContent: true,
-        endsWithQuestion: true,
+        endsWithInteraction: true,
         questionDismissed: true,
       })
     ).toBe(true)
@@ -21,7 +21,7 @@ describe('shouldShowAssistantMessageActions', () => {
       shouldShowAssistantMessageActions({
         phase: 'settled',
         hasContent: true,
-        endsWithQuestion: true,
+        endsWithInteraction: true,
         questionDismissed: false,
       })
     ).toBe(false)
@@ -32,7 +32,7 @@ describe('shouldShowAssistantMessageActions', () => {
       shouldShowAssistantMessageActions({
         phase: 'streaming',
         hasContent: true,
-        endsWithQuestion: true,
+        endsWithInteraction: true,
         questionDismissed: true,
       })
     ).toBe(false)
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.ts
index 0c84c1481b0..76f11127cc6 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/message-actions-visibility.ts
@@ -3,20 +3,20 @@ import type { MessagePhase } from '@/app/workspace/[workspaceId]/home/components
 interface AssistantMessageActionsVisibility {
   phase: MessagePhase
   hasContent: boolean
-  endsWithQuestion: boolean
+  endsWithInteraction: boolean
   questionDismissed: boolean
 }
 
 /**
- * Question cards replace the normal message actions while they are active or
- * answered. Dismissing an active card restores those actions for the settled
- * assistant message underneath it.
+ * Terminal question and credential cards replace the normal message actions
+ * while active or answered. Dismissing a question restores those actions for
+ * the settled assistant message underneath it.
  */
 export function shouldShowAssistantMessageActions({
   phase,
   hasContent,
-  endsWithQuestion,
+  endsWithInteraction,
   questionDismissed,
 }: AssistantMessageActionsVisibility): boolean {
-  return phase === 'settled' && hasContent && (!endsWithQuestion || questionDismissed)
+  return phase === 'settled' && hasContent && (!endsWithInteraction || questionDismissed)
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index 4ed0236df5a..8a1d82acd7e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -22,7 +22,13 @@ import {
   type MessagePhase,
 } from '@/app/workspace/[workspaceId]/home/components/message-content'
 import { parseQuestionAnswerMessage } from '@/app/workspace/[workspaceId]/home/components/message-content/components/question'
-import { parseLastQuestionTag } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
+import {
+  type CredentialSubmissionPayload,
+  credentialTagHasVisibleCard,
+  parseCredentialSubmissionProgress,
+  parseLastCredentialTag,
+  parseLastQuestionTag,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 import { QueuedMessages } from '@/app/workspace/[workspaceId]/home/components/queued-messages'
 import {
   UserInput,
@@ -38,6 +44,7 @@ import type {
   QueuedMessage,
   WorkspaceResourceRef,
 } from '@/app/workspace/[workspaceId]/home/types'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useAutoScroll } from '@/hooks/use-auto-scroll'
 import type { ChatContext } from '@/stores/panel'
 import { MothershipChatSkeleton } from './components/mothership-chat-skeleton'
@@ -182,6 +189,8 @@ interface AssistantMessageRowProps {
   precedingUserContent?: string
   /** Transcript-derived answers for this message's question card (renders the recap). */
   questionAnswers?: string[]
+  /** Transcript-derived status payload for this message's credential card. */
+  credentialSubmission?: CredentialSubmissionPayload
   rowClassName: string
   onOptionSelect?: (id: string) => void
   onAnimatingChange?: (animating: boolean) => void
@@ -193,10 +202,12 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
   isLast,
   precedingUserContent,
   questionAnswers,
+  credentialSubmission,
   rowClassName,
   onOptionSelect,
   onAnimatingChange,
 }: AssistantMessageRowProps) {
+  const { canEdit } = useUserPermissionsContext()
   const blocks = message.contentBlocks ?? EMPTY_BLOCKS
   const hasAnyBlocks = blocks.length > 0
   const trimmedContent = message.content?.trim() ?? ''
@@ -215,10 +226,15 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
     return null
   }
 
-  // A trailing question card replaces the copy/thumbs row while active or
-  // answered. Its raw tag is the dismissal identity so a later question added
-  // to the same turn cannot inherit an earlier card's dismissed state.
+  // A trailing question or credential card replaces the copy/thumbs row while
+  // active or answered. A question's raw tag is its dismissal identity so a
+  // later question added to the same turn cannot inherit an earlier dismissal.
   const endsWithQuestion = trimmedContent.endsWith('</question>')
+  const endsWithCredential = trimmedContent.endsWith('</credential>')
+  const trailingCredentials = endsWithCredential ? parseLastCredentialTag(trimmedContent) : null
+  const showsCredentialCard = trailingCredentials
+    ? credentialTagHasVisibleCard(trailingCredentials, canEdit)
+    : false
   const questionTag = endsWithQuestion
     ? trimmedContent.slice(trimmedContent.lastIndexOf('<question>'))
     : null
@@ -232,25 +248,27 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
   const actionsEligible = shouldShowAssistantMessageActions({
     phase: 'settled',
     hasContent: Boolean(message.content) || hasAnyBlocks,
-    endsWithQuestion,
+    endsWithInteraction: endsWithQuestion || showsCredentialCard,
     questionDismissed,
   })
 
-  // A visible question card (active or answered recap) sits 12px below the
+  // A visible interaction card (active or answered recap) sits 12px below the
   // preceding prose (chat-content's `space-y-3`). The row's default `pb-6`
   // would leave 24px underneath — asymmetric. Shrink the trailing gap to match
   // so the card breathes equally top and bottom. Dismissed cards fall back to
   // the normal message rhythm (they render the standard actions row instead).
-  const showsQuestionCard = endsWithQuestion && !questionDismissed
+  const showsInteractionCard = (endsWithQuestion && !questionDismissed) || showsCredentialCard
 
   return (
-    <div className={cn(rowClassName, showsQuestionCard && 'pb-3')}>
+    <div className={cn(rowClassName, showsInteractionCard && 'pb-3')}>
       <MessageContent
+        messageId={message.id}
         blocks={blocks}
         fallbackContent={message.content}
         isStreaming={isStreaming}
         isLast={isLast}
         questionAnswers={questionAnswers}
+        credentialSubmission={credentialSubmission}
         onOptionSelect={onOptionSelect}
         onQuestionDismiss={handleQuestionDismiss}
         onPhaseChange={setPhase}
@@ -474,13 +492,13 @@ export function MothershipChat({
   }, [messages])
 
   /**
-   * Pairs each assistant question card with the user message that answered it
-   * (strict `Prompt — Answer` match). The paired user message is hidden — the
-   * answered card IS the user turn — and the assistant row renders the card
-   * as a recap with these answers, both live and after reload.
+   * Pairs each assistant question/credential card with the user message that
+   * completed it. The paired user message is hidden — the answered card IS the
+   * user turn — and the assistant row renders a recap both live and on reload.
    */
-  const questionPairing = useMemo(() => {
+  const interactionPairing = useMemo(() => {
     const answersByIndex: Array<string[] | undefined> = []
+    const credentialSubmissionByIndex: Array<CredentialSubmissionPayload | undefined> = []
     const hiddenUserByIndex: Array<boolean | undefined> = []
     for (const [index, message] of messages.entries()) {
       if (message.role !== 'assistant') continue
@@ -490,15 +508,27 @@ export function MothershipChat({
       // snapshot flush.
       const next = messages[index + 1]
       if (!next || next.role !== 'user' || !next.content) continue
-      if (!message.content?.includes('</question>')) continue
-      const questions = parseLastQuestionTag(message.content)
-      if (!questions) continue
-      const answers = parseQuestionAnswerMessage(questions, next.content)
-      if (!answers) continue
-      answersByIndex[index] = answers
-      hiddenUserByIndex[index + 1] = true
+      if (message.content?.includes('</question>')) {
+        const questions = parseLastQuestionTag(message.content)
+        const answers = questions ? parseQuestionAnswerMessage(questions, next.content) : null
+        if (answers) {
+          answersByIndex[index] = answers
+          hiddenUserByIndex[index + 1] = true
+          continue
+        }
+      }
+      if (message.content?.includes('</credential>')) {
+        const credentials = parseLastCredentialTag(message.content)
+        const submission = credentials
+          ? parseCredentialSubmissionProgress(credentials, next.content)
+          : null
+        if (submission) {
+          credentialSubmissionByIndex[index] = submission
+          hiddenUserByIndex[index + 1] = true
+        }
+      }
     }
-    return { answersByIndex, hiddenUserByIndex }
+    return { answersByIndex, credentialSubmissionByIndex, hiddenUserByIndex }
   }, [messages])
 
   /**
@@ -642,7 +672,7 @@ export function MothershipChat({
                     style={{ transform: `translateY(${virtualItem.start}px)` }}
                   >
                     {msg.role === 'user' ? (
-                      questionPairing.hiddenUserByIndex[index] ? null : (
+                      interactionPairing.hiddenUserByIndex[index] ? null : (
                         <UserMessageRow
                           content={msg.content}
                           contexts={msg.contexts}
@@ -658,7 +688,8 @@ export function MothershipChat({
                         isStreaming={isStreamActive && isLast}
                         isLast={isLast}
                         precedingUserContent={precedingUserContentByIndex[index]}
-                        questionAnswers={questionPairing.answersByIndex[index]}
+                        questionAnswers={interactionPairing.answersByIndex[index]}
+                        credentialSubmission={interactionPairing.credentialSubmissionByIndex[index]}
                         rowClassName={cn(styles.assistantRow, styles.rowGap)}
                         onOptionSelect={isLast ? stableOnOptionSelect : undefined}
                         onAnimatingChange={isLast ? setLastRowAnimating : undefined}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
index 99337ba6e9f..f48df8e4bff 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
@@ -75,6 +75,8 @@ interface ClientCredentialAccountModalProps {
   credentialId?: string
   initialDisplayName?: string
   initialDescription?: string
+  /** Called with the credential id after a successful create or reconnect. */
+  onCreated?: (credentialId: string) => void
 }
 
 /**
@@ -96,6 +98,7 @@ export function ClientCredentialAccountModal({
   credentialId,
   initialDisplayName,
   initialDescription,
+  onCreated,
 }: ClientCredentialAccountModalProps) {
   const [clientId, setClientId] = useState('')
   const [clientSecret, setClientSecret] = useState('')
@@ -144,6 +147,7 @@ export function ClientCredentialAccountModal({
     setError(null)
     if (isDisabled) return
     try {
+      let connectedCredentialId = credentialId
       const secretFields = {
         clientId: trimmedClientId,
         clientSecret: trimmedClientSecret,
@@ -158,7 +162,7 @@ export function ClientCredentialAccountModal({
           description: description.trim() || undefined,
         })
       } else {
-        await createCredential.mutateAsync({
+        const created = await createCredential.mutateAsync({
           workspaceId,
           type: 'service_account',
           providerId: descriptor.providerId,
@@ -166,7 +170,9 @@ export function ClientCredentialAccountModal({
           displayName: displayName.trim() || undefined,
           description: description.trim() || undefined,
         })
+        connectedCredentialId = created.credential.id
       }
+      if (connectedCredentialId) onCreated?.(connectedCredentialId)
       onOpenChange(false)
     } catch (err: unknown) {
       setError(messageForClientCredentialError(err, descriptor))
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal.tsx
index e9ceb2b019b..d8f21c6adbc 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal.tsx
@@ -161,6 +161,7 @@ export function ConnectServiceAccountModal({
         credentialId={credentialId}
         initialDisplayName={credentialDisplayName}
         initialDescription={credentialDescription}
+        onCreated={onCreated}
       />
     )
   }
@@ -205,6 +206,7 @@ export function ConnectServiceAccountModal({
         credentialId={credentialId}
         initialDisplayName={credentialDisplayName}
         initialDescription={credentialDescription}
+        onCreated={onCreated}
       />
     )
   }
@@ -218,6 +220,7 @@ export function ConnectServiceAccountModal({
       credentialId={credentialId}
       initialDisplayName={credentialDisplayName}
       initialDescription={credentialDescription}
+      onCreated={onCreated}
     />
   )
 }
@@ -233,6 +236,8 @@ interface ProviderModalProps {
   /** Existing name/description, seeded into the fields on reconnect. */
   initialDisplayName?: string
   initialDescription?: string
+  /** Called with the credential id after a successful create or reconnect. */
+  onCreated?: (credentialId: string) => void
 }
 
 /**
@@ -249,6 +254,7 @@ function GoogleServiceAccountModal({
   credentialId,
   initialDisplayName,
   initialDescription,
+  onCreated,
 }: ProviderModalProps) {
   const [jsonInput, setJsonInput] = useState('')
   const [uploadedFileName, setUploadedFileName] = useState<string | null>(null)
@@ -318,6 +324,7 @@ function GoogleServiceAccountModal({
       return
     }
     try {
+      let connectedCredentialId = credentialId
       if (credentialId) {
         await updateCredential.mutateAsync({
           credentialId,
@@ -326,14 +333,16 @@ function GoogleServiceAccountModal({
           description: description.trim() || undefined,
         })
       } else {
-        await createCredential.mutateAsync({
+        const created = await createCredential.mutateAsync({
           workspaceId,
           type: 'service_account',
           displayName: displayName.trim() || undefined,
           description: description.trim() || undefined,
           serviceAccountJson: trimmed,
         })
+        connectedCredentialId = created.credential.id
       }
+      if (connectedCredentialId) onCreated?.(connectedCredentialId)
       onOpenChange(false)
     } catch (err: unknown) {
       const message = getErrorMessage(err, 'Failed to add service account')
@@ -436,6 +445,7 @@ function AtlassianServiceAccountModal({
   credentialId,
   initialDisplayName,
   initialDescription,
+  onCreated,
 }: ProviderModalProps) {
   const [apiToken, setApiToken] = useState('')
   const [domain, setDomain] = useState('')
@@ -467,6 +477,7 @@ function AtlassianServiceAccountModal({
     setError(null)
     if (isDisabled) return
     try {
+      let connectedCredentialId = credentialId
       if (credentialId) {
         await updateCredential.mutateAsync({
           credentialId,
@@ -476,7 +487,7 @@ function AtlassianServiceAccountModal({
           description: description.trim() || undefined,
         })
       } else {
-        await createCredential.mutateAsync({
+        const created = await createCredential.mutateAsync({
           workspaceId,
           type: 'service_account',
           providerId: ATLASSIAN_SERVICE_ACCOUNT_PROVIDER_ID,
@@ -485,7 +496,9 @@ function AtlassianServiceAccountModal({
           displayName: displayName.trim() || undefined,
           description: description.trim() || undefined,
         })
+        connectedCredentialId = created.credential.id
       }
+      if (connectedCredentialId) onCreated?.(connectedCredentialId)
       onOpenChange(false)
     } catch (err: unknown) {
       setError(messageForAtlassianError(err))
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/token-service-account-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/token-service-account-modal.tsx
index 428644b62f8..25967bb9917 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/token-service-account-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/token-service-account-modal.tsx
@@ -46,7 +46,7 @@ interface TokenServiceAccountModalProps {
   credentialId?: string
   initialDisplayName?: string
   initialDescription?: string
-  /** Called with the new credential id after a successful create (not reconnect). */
+  /** Called with the credential id after a successful create or reconnect. */
   onCreated?: (credentialId: string) => void
 }
 
@@ -115,6 +115,7 @@ export function TokenServiceAccountModal({
           displayName: displayName.trim() || undefined,
           description: description.trim() || undefined,
         })
+        onCreated?.(credentialId)
       } else {
         const created = await createCredential.mutateAsync({
           workspaceId,
diff --git a/apps/sim/hooks/queries/oauth/oauth-connections.ts b/apps/sim/hooks/queries/oauth/oauth-connections.ts
index 66124cf1e47..6a08f723d1f 100644
--- a/apps/sim/hooks/queries/oauth/oauth-connections.ts
+++ b/apps/sim/hooks/queries/oauth/oauth-connections.ts
@@ -140,7 +140,8 @@ export function useConnectOAuthService() {
   return useMutation({
     mutationFn: async ({ providerId, callbackURL }: ConnectServiceParams) => {
       if (providerId === 'trello') {
-        window.location.href = '/api/auth/trello/authorize'
+        const returnUrl = encodeURIComponent(callbackURL)
+        window.location.href = `/api/auth/trello/authorize?returnUrl=${returnUrl}`
         return { success: true }
       }
 
diff --git a/apps/sim/hooks/use-oauth-return.ts b/apps/sim/hooks/use-oauth-return.ts
index ee0b1f6ff31..a5a97017b17 100644
--- a/apps/sim/hooks/use-oauth-return.ts
+++ b/apps/sim/hooks/use-oauth-return.ts
@@ -2,7 +2,9 @@
 
 import { useEffect, useRef } from 'react'
 import { toast } from '@sim/emcn'
-import { useQueryClient } from '@tanstack/react-query'
+import { sleep } from '@sim/utils/helpers'
+import { backoffWithJitter } from '@sim/utils/retry'
+import { type QueryClient, useQueryClient } from '@tanstack/react-query'
 import { useParams, useRouter } from 'next/navigation'
 import { requestJson } from '@/lib/api/client/request'
 import { listWorkspaceCredentialsContract } from '@/lib/api/contracts'
@@ -12,6 +14,14 @@ import {
   type OAuthReturnContext,
   readOAuthReturnContext,
 } from '@/lib/credentials/client-state'
+import {
+  hasOAuthCredentialChanged,
+  OAUTH_CHAT_ATTEMPT_MAX_AGE_MS,
+  OAUTH_CHAT_ATTEMPT_PARAM,
+  readOAuthChatAttempt,
+  resolveActiveDesktopOAuthChatAttempt,
+  setOAuthChatAttemptStatus,
+} from '@/lib/credentials/oauth-chat-attempt'
 import { getDesktopBridge } from '@/lib/desktop'
 import { oauthConnectionsKeys } from '@/hooks/queries/oauth/oauth-connections'
 import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
@@ -43,7 +53,7 @@ async function resolveOAuthMessage(ctx: OAuthReturnContext): Promise<string> {
   }
 }
 
-function dispatchCredentialUpdate(ctx: OAuthReturnContext) {
+function dispatchCredentialUpdate(ctx: { providerId: string; workspaceId: string }) {
   window.dispatchEvent(
     new CustomEvent(OAUTH_CREDENTIAL_UPDATED_EVENT, {
       detail: { providerId: ctx.providerId, workspaceId: ctx.workspaceId },
@@ -51,6 +61,64 @@ function dispatchCredentialUpdate(ctx: OAuthReturnContext) {
   )
 }
 
+function clearOAuthChatAttemptParam(): void {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(OAUTH_CHAT_ATTEMPT_PARAM)
+  window.history.replaceState(window.history.state, '', `${url.pathname}${url.search}${url.hash}`)
+}
+
+const VERIFY_ATTEMPT_TRIES = 4
+const VERIFY_BACKOFF_BASE_MS = 400
+
+/**
+ * Confirms the credential the chip launched actually landed, then publishes the
+ * result to the row that is waiting on it.
+ *
+ * The read goes through the QueryClient on the key the chips subscribe to, so
+ * one request both decides the verdict and refreshes every mounted row —
+ * `staleTime: 0` forces a live read rather than reusing the cached list the
+ * flow started from.
+ */
+async function verifyOAuthChatAttempt(queryClient: QueryClient, attemptId: string): Promise<void> {
+  const attempt = readOAuthChatAttempt(attemptId)
+  if (!attempt || Date.now() - attempt.requestedAt > OAUTH_CHAT_ATTEMPT_MAX_AGE_MS) return
+
+  if (new URL(window.location.href).searchParams.has('error')) {
+    setOAuthChatAttemptStatus(attempt.id, 'failed')
+    toast.error(`The ${attempt.displayName} connection didn’t finish. Try again.`)
+    return
+  }
+
+  for (let attemptNumber = 0; attemptNumber < VERIFY_ATTEMPT_TRIES; attemptNumber += 1) {
+    try {
+      const credentials = await queryClient.fetchQuery({
+        queryKey: workspaceCredentialKeys.list(attempt.workspaceId, 'oauth'),
+        queryFn: ({ signal }) =>
+          requestJson(listWorkspaceCredentialsContract, {
+            query: { workspaceId: attempt.workspaceId, type: 'oauth' },
+            signal,
+          }).then((data) => data.credentials ?? []),
+        staleTime: 0,
+      })
+
+      if (hasOAuthCredentialChanged(attempt, credentials)) {
+        setOAuthChatAttemptStatus(attempt.id, 'connected')
+        dispatchCredentialUpdate(attempt)
+        toast.success(`${attempt.displayName} connected successfully.`)
+        return
+      }
+    } catch {
+      // A short retry window covers callback hooks committing just after redirect.
+    }
+    if (attemptNumber < VERIFY_ATTEMPT_TRIES - 1) {
+      await sleep(backoffWithJitter(attemptNumber + 1, null, { baseMs: VERIFY_BACKOFF_BASE_MS }))
+    }
+  }
+
+  setOAuthChatAttemptStatus(attempt.id, 'failed')
+  toast.error(`We couldn’t verify the ${attempt.displayName} connection. Try again.`)
+}
+
 /**
  * Post-OAuth router for the integrations page.
  *
@@ -64,13 +132,33 @@ function dispatchCredentialUpdate(ctx: OAuthReturnContext) {
 export function useOAuthReturnRouter() {
   const router = useRouter()
   const params = useParams()
+  const queryClient = useQueryClient()
   const workspaceId = params.workspaceId as string
   const handledRef = useRef(false)
+  const chatAttemptHandledRef = useRef(false)
 
   useEffect(() => {
+    let isChatAttemptReturn = false
+    if (!chatAttemptHandledRef.current) {
+      const attemptId = new URL(window.location.href).searchParams.get(OAUTH_CHAT_ATTEMPT_PARAM)
+      if (attemptId) {
+        chatAttemptHandledRef.current = true
+        isChatAttemptReturn = true
+        void verifyOAuthChatAttempt(queryClient, attemptId).finally(clearOAuthChatAttemptParam)
+      }
+    }
+
     if (handledRef.current) return
     const ctx = readOAuthReturnContext()
     if (!ctx) return
+    // A chip return carries its own verdict and toast. Any return context still
+    // sitting here belongs to an earlier, abandoned modal connect — consume it
+    // so it cannot double-toast now or attach to a later completion, the same
+    // discard useDesktopOAuthConnectListener does.
+    if (isChatAttemptReturn) {
+      consumeOAuthReturnContext()
+      return
+    }
     if (Date.now() - ctx.requestedAt > CONTEXT_MAX_AGE_MS) {
       consumeOAuthReturnContext()
       return
@@ -107,7 +195,7 @@ export function useOAuthReturnRouter() {
       router.replace(`${kbUrl}${connectorParam}`)
       return
     }
-  }, [router, workspaceId])
+  }, [queryClient, router, workspaceId])
 }
 
 /**
@@ -178,11 +266,13 @@ export function useDesktopOAuthConnectListener() {
       const rawCtx = readOAuthReturnContext()
       if (rawCtx) consumeOAuthReturnContext()
       const ctx = rawCtx && Date.now() - rawCtx.requestedAt <= CONTEXT_MAX_AGE_MS ? rawCtx : null
+      const chatAttempt = resolveActiveDesktopOAuthChatAttempt(result.ok ? 'connected' : 'failed')
 
       if (!result.ok) {
         toast.error('The account connection didn’t finish. Try connecting again.')
         return
       }
+      if (chatAttempt) dispatchCredentialUpdate(chatAttempt)
       if (ctx) {
         void (async () => {
           const message = await resolveOAuthMessage(ctx)
diff --git a/apps/sim/lib/api/contracts/oauth-connections.test.ts b/apps/sim/lib/api/contracts/oauth-connections.test.ts
index a778ddf549f..db44ebfb81f 100644
--- a/apps/sim/lib/api/contracts/oauth-connections.test.ts
+++ b/apps/sim/lib/api/contracts/oauth-connections.test.ts
@@ -5,6 +5,7 @@ import { describe, expect, it } from 'vitest'
 import {
   instagramAuthorizeQuerySchema,
   instagramCallbackQuerySchema,
+  trelloAuthorizeQuerySchema,
 } from '@/lib/api/contracts/oauth-connections'
 
 describe('Instagram OAuth query contracts', () => {
@@ -39,3 +40,21 @@ describe('Instagram OAuth query contracts', () => {
     ).toBe(false)
   })
 })
+
+describe('Trello OAuth query contracts', () => {
+  it('accepts a bounded chat return URL', () => {
+    expect(
+      trelloAuthorizeQuerySchema.safeParse({
+        returnUrl: 'https://sim.ai/workspace/workspace-1/chat/chat-1?oauthAttempt=attempt-1',
+      }).success
+    ).toBe(true)
+  })
+
+  it('rejects an oversized return URL before it can be persisted in a cookie', () => {
+    expect(
+      trelloAuthorizeQuerySchema.safeParse({
+        returnUrl: `https://sim.ai/${'a'.repeat(2048)}`,
+      }).success
+    ).toBe(false)
+  })
+})
diff --git a/apps/sim/lib/api/contracts/oauth-connections.ts b/apps/sim/lib/api/contracts/oauth-connections.ts
index 103aab8144d..7effa93f300 100644
--- a/apps/sim/lib/api/contracts/oauth-connections.ts
+++ b/apps/sim/lib/api/contracts/oauth-connections.ts
@@ -47,7 +47,13 @@ export const trelloTokenBodySchema = z.object({
   state: z.string().min(1, 'state is required'),
 })
 
-const emptyTrelloAuthQuerySchema = z.object({}).passthrough()
+export const trelloAuthorizeQuerySchema = z.object({
+  returnUrl: z
+    .string()
+    .min(1, 'Return URL cannot be empty')
+    .max(2048, 'Return URL is too long')
+    .optional(),
+})
 
 const trelloCallbackQuerySchema = z
   .object({
@@ -183,7 +189,7 @@ export const storeTrelloTokenContract = defineRouteContract({
 export const authorizeTrelloContract = defineRouteContract({
   method: 'GET',
   path: '/api/auth/trello/authorize',
-  query: emptyTrelloAuthQuerySchema,
+  query: trelloAuthorizeQuerySchema,
   response: { mode: 'redirect' },
 })
 
diff --git a/apps/sim/lib/copilot/chat/sim-key-redaction.test.ts b/apps/sim/lib/copilot/chat/sim-key-redaction.test.ts
index 0d2e28b8537..c06dc9eaf5d 100644
--- a/apps/sim/lib/copilot/chat/sim-key-redaction.test.ts
+++ b/apps/sim/lib/copilot/chat/sim-key-redaction.test.ts
@@ -8,6 +8,7 @@ import {
   captureRevealedSimKeys,
   extractRevealedSimKeys,
   extractRevealedSimKeysFromBlocks,
+  redactSensitiveContent,
   restoreRevealedSimKeysForMessage,
   toolResultForModel,
 } from './sim-key-redaction'
@@ -17,6 +18,7 @@ const credential = (value: string) =>
 const redacted = `<credential>${JSON.stringify({ type: 'sim_key', redacted: true })}</credential>`
 // The value-less placeholder the model now emits (no `redacted` flag).
 const placeholder = `<credential>${JSON.stringify({ type: 'sim_key' })}</credential>`
+const credentialBatch = (items: unknown[]) => `<credential>${JSON.stringify(items)}</credential>`
 
 const apiKeyBlock = (key: string) => ({
   type: 'tool_call' as const,
@@ -35,6 +37,23 @@ describe('sim-key-redaction', () => {
       const text = `${link} ${credential('sk-sim-A')} ${redacted}`
       expect(extractRevealedSimKeys(text)).toEqual(['sk-sim-A'])
     })
+
+    it('returns sim_key values from a mixed credential-card array', () => {
+      const batch = credentialBatch([
+        { type: 'link', value: 'https://x', provider: 'slack' },
+        { type: 'sim_key', value: 'sk-sim-A' },
+        { type: 'sim_key', value: 'sk-sim-B' },
+      ])
+      expect(extractRevealedSimKeys(batch)).toEqual(['sk-sim-A', 'sk-sim-B'])
+    })
+  })
+
+  describe('redactSensitiveContent', () => {
+    it('redacts sim_key rows in a mixed credential-card array without changing other rows', () => {
+      const link = { type: 'link', value: 'https://x', provider: 'slack' }
+      const batch = credentialBatch([link, { type: 'sim_key', value: 'sk-sim-secret' }])
+      expect(redactSensitiveContent(batch)).toBe(credentialBatch([link, { type: 'sim_key' }]))
+    })
   })
 
   describe('toolResultForModel', () => {
@@ -175,6 +194,21 @@ describe('sim-key-redaction', () => {
       )
     })
 
+    it('fills sim_key rows positionally inside a mixed credential-card array', () => {
+      const link = { type: 'link', value: 'https://x', provider: 'slack' }
+      const batch = credentialBatch([link, { type: 'sim_key' }, { type: 'sim_key' }])
+      const cache = new Map<string, string[]>([['msg-1', ['sk-sim-A', 'sk-sim-B']]])
+      const msg: ChatMessage = { id: 'msg-1', role: 'assistant', content: batch }
+
+      expect(restoreRevealedSimKeysForMessage(msg, cache).content).toBe(
+        credentialBatch([
+          link,
+          { value: 'sk-sim-A', type: 'sim_key' },
+          { value: 'sk-sim-B', type: 'sim_key' },
+        ])
+      )
+    })
+
     it('substitutes multiple keys in stream order', () => {
       const cache = new Map<string, string[]>([['msg-1', ['sk-sim-A', 'sk-sim-B']]])
       const msg: ChatMessage = {
diff --git a/apps/sim/lib/copilot/chat/sim-key-redaction.ts b/apps/sim/lib/copilot/chat/sim-key-redaction.ts
index 023efd6baee..a38446b0e3b 100644
--- a/apps/sim/lib/copilot/chat/sim-key-redaction.ts
+++ b/apps/sim/lib/copilot/chat/sim-key-redaction.ts
@@ -35,14 +35,22 @@ interface CredentialTagBody {
   value?: unknown
 }
 
-function parseCredentialBody(body: string): CredentialTagBody | null {
+function parseCredentialBody(body: string): unknown | null {
   try {
-    return JSON.parse(body) as CredentialTagBody
+    return JSON.parse(body) as unknown
   } catch {
     return null
   }
 }
 
+function isSimKeyBody(value: unknown): value is CredentialTagBody {
+  return isRecordLike(value) && value.type === SIM_KEY_TYPE
+}
+
+function credentialBodies(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [value]
+}
+
 /**
  * True when `content` holds a `sim_key` credential tag that still needs its
  * value filled in — i.e. any value-less `sim_key` tag: the model's
@@ -54,7 +62,9 @@ function hasFillableSimKeyTag(content: string | undefined): boolean {
   if (typeof content !== 'string' || !content.includes('<credential>')) return false
   for (const match of content.matchAll(CREDENTIAL_TAG_PATTERN)) {
     const parsed = parseCredentialBody(match[1])
-    if (parsed?.type === SIM_KEY_TYPE && parsed.value === undefined) return true
+    if (credentialBodies(parsed).some((item) => isSimKeyBody(item) && item.value === undefined)) {
+      return true
+    }
   }
   return false
 }
@@ -70,7 +80,16 @@ export function redactSensitiveContent<T extends string | undefined>(content: T)
   if (typeof content !== 'string' || !content.includes('<credential>')) return content
   return content.replace(CREDENTIAL_TAG_PATTERN, (match, body: string) => {
     const parsed = parseCredentialBody(body)
-    return parsed?.type === SIM_KEY_TYPE ? VALUELESS_SIM_KEY_TAG : match
+    if (isSimKeyBody(parsed)) return VALUELESS_SIM_KEY_TAG
+    if (!Array.isArray(parsed)) return match
+
+    let changed = false
+    const next = parsed.map((item) => {
+      if (!isSimKeyBody(item)) return item
+      changed = true
+      return { type: SIM_KEY_TYPE }
+    })
+    return changed ? `<credential>${JSON.stringify(next)}</credential>` : match
   }) as T
 }
 
@@ -205,8 +224,10 @@ export function extractRevealedSimKeys(content: string): string[] {
   const values: string[] = []
   for (const match of content.matchAll(CREDENTIAL_TAG_PATTERN)) {
     const parsed = parseCredentialBody(match[1])
-    if (parsed?.type === SIM_KEY_TYPE && typeof parsed.value === 'string') {
-      values.push(parsed.value)
+    for (const item of credentialBodies(parsed)) {
+      if (isSimKeyBody(item) && typeof item.value === 'string') {
+        values.push(item.value)
+      }
     }
   }
   return values
@@ -291,18 +312,28 @@ function restoreInString(
   let changed = false
   const next = content.replace(CREDENTIAL_TAG_PATTERN, (match, body: string) => {
     const parsed = parseCredentialBody(body)
-    // Any value-less sim_key tag is a fill slot — the model's placeholder, the
-    // persisted form, or a legacy `{"redacted":true}` tag. Already-filled tags
-    // carry a `value` and are left untouched (idempotent).
-    if (parsed?.type === SIM_KEY_TYPE && parsed.value === undefined) {
+    let tagChanged = false
+    const restoreItem = (item: unknown): unknown => {
+      if (!isSimKeyBody(item) || item.value !== undefined) return item
       const value = revealedValues[cursor]
       cursor += 1
       if (typeof value === 'string') {
         changed = true
-        return `<credential>${JSON.stringify({ value, type: SIM_KEY_TYPE })}</credential>`
+        tagChanged = true
+        return { value, type: SIM_KEY_TYPE }
       }
+      return item
+    }
+
+    // Any value-less sim_key object is a fill slot — the model's placeholder,
+    // the persisted form, or a legacy `{"redacted":true}` object. Already-filled
+    // objects carry a `value` and are left untouched (idempotent).
+    if (Array.isArray(parsed)) {
+      const restored = parsed.map(restoreItem)
+      return tagChanged ? `<credential>${JSON.stringify(restored)}</credential>` : match
     }
-    return match
+    const restored = restoreItem(parsed)
+    return tagChanged ? `<credential>${JSON.stringify(restored)}</credential>` : match
   })
   return { next, changed, cursor }
 }
diff --git a/apps/sim/lib/copilot/generated/tool-catalog-v1.ts b/apps/sim/lib/copilot/generated/tool-catalog-v1.ts
index e67b7fd1761..9c996be921a 100644
--- a/apps/sim/lib/copilot/generated/tool-catalog-v1.ts
+++ b/apps/sim/lib/copilot/generated/tool-catalog-v1.ts
@@ -3793,7 +3793,7 @@ export const OauthRequestAccess: ToolCatalogEntry = {
       providerName: {
         type: 'string',
         description:
-          "The OAuth provider to connect. Pass the integration's provider value (e.g. `google-email`, `slack`); the service display name or providerId resolves case-insensitively/fuzzily, so avoid bare base providers like `google`.",
+          "The OAuth provider to connect. Pass the integration's provider value (e.g. `google-email`, `slack`).",
       },
     },
     required: ['providerName'],
diff --git a/apps/sim/lib/copilot/generated/tool-schemas-v1.ts b/apps/sim/lib/copilot/generated/tool-schemas-v1.ts
index 81188db33ab..e7745482158 100644
--- a/apps/sim/lib/copilot/generated/tool-schemas-v1.ts
+++ b/apps/sim/lib/copilot/generated/tool-schemas-v1.ts
@@ -3662,7 +3662,7 @@ export const TOOL_RUNTIME_SCHEMAS: Record<string, ToolRuntimeSchemaEntry> = {
         providerName: {
           type: 'string',
           description:
-            "The OAuth provider to connect. Pass the integration's provider value (e.g. `google-email`, `slack`); the service display name or providerId resolves case-insensitively/fuzzily, so avoid bare base providers like `google`.",
+            "The OAuth provider to connect. Pass the integration's provider value (e.g. `google-email`, `slack`).",
         },
       },
       required: ['providerName'],
diff --git a/apps/sim/lib/copilot/tool-executor/register-handlers.ts b/apps/sim/lib/copilot/tool-executor/register-handlers.ts
index 3cfedbbd82a..f2f9eb6d304 100644
--- a/apps/sim/lib/copilot/tool-executor/register-handlers.ts
+++ b/apps/sim/lib/copilot/tool-executor/register-handlers.ts
@@ -186,6 +186,9 @@ function buildHandlerMap(): Record<string, ToolHandler> {
     [ManageSkill.id]: h(executeManageSkill),
     [ManageCredential.id]: h(executeManageCredential),
     [OauthGetAuthLink.id]: h(executeOAuthGetAuthLink),
+    // Rolling-deploy compatibility for calls/checkpoints created before OAuth
+    // moved into terminal credential cards. New agents no longer receive this
+    // tool, but old calls must remain resumable until both services have soaked.
     [OauthRequestAccess.id]: h(executeOAuthRequestAccess),
     [OpenResource.id]: h(executeOpenResource),
     [RestoreResource.id]: h(executeRestoreResource),
diff --git a/apps/sim/lib/copilot/tools/handlers/oauth.ts b/apps/sim/lib/copilot/tools/handlers/oauth.ts
index 1c7936d8980..5549efacd10 100644
--- a/apps/sim/lib/copilot/tools/handlers/oauth.ts
+++ b/apps/sim/lib/copilot/tools/handlers/oauth.ts
@@ -94,6 +94,7 @@ export async function executeOAuthGetAuthLink(
   }
 }
 
+/** Compatibility executor for older Mothership calls and persisted checkpoints. */
 export async function executeOAuthRequestAccess(
   rawParams: Record<string, unknown>,
   _context: ExecutionContext
@@ -206,7 +207,9 @@ async function generateOAuthLink(
         : `${baseUrl}/workspace/${workspaceId}`
 
   if (providerId === 'trello') {
-    return { url: `${baseUrl}/api/auth/trello/authorize`, providerId, serviceName }
+    const authorizeUrl = new URL(`${baseUrl}/api/auth/trello/authorize`)
+    authorizeUrl.searchParams.set('returnUrl', callbackURL)
+    return { url: authorizeUrl.toString(), providerId, serviceName }
   }
   if (providerId === 'instagram') {
     const authorizeUrl = new URL(`${baseUrl}/api/auth/instagram/authorize`)
diff --git a/apps/sim/lib/credentials/draft-hooks.ts b/apps/sim/lib/credentials/draft-hooks.ts
index 45f80ef1164..e467f56609e 100644
--- a/apps/sim/lib/credentials/draft-hooks.ts
+++ b/apps/sim/lib/credentials/draft-hooks.ts
@@ -97,8 +97,12 @@ export async function handleCreateCredentialFromDraft(params: {
 }
 
 /**
- * Reconnects an existing credential to a new OAuth account.
+ * Reconnects an existing credential to the account the user just authorized.
  * Handles unique constraint checks and orphaned account cleanup.
+ *
+ * Re-authorizing the *same* account is the common case — a dead or expired
+ * token the user refreshes in place — so it still bumps `updatedAt` and clears
+ * the dead flag. Callers treat that timestamp as proof the reconnect landed.
  */
 export async function handleReconnectCredential(params: {
   draft: { credentialId: string | null; workspaceId: string; displayName: string }
@@ -124,34 +128,29 @@ export async function handleReconnectCredential(params: {
   }
 
   const oldAccountId = existingCredential.accountId
+  const accountChanged = oldAccountId !== newAccountId
 
-  if (oldAccountId === newAccountId) {
-    logger.info('Account unchanged during reconnect, skipping update', {
-      credentialId: draft.credentialId,
-      accountId: newAccountId,
-    })
-    return
-  }
-
-  const [conflicting] = await db
-    .select({ id: schema.credential.id })
-    .from(schema.credential)
-    .where(
-      and(
-        eq(schema.credential.workspaceId, workspaceId),
-        eq(schema.credential.accountId, newAccountId),
-        sql`${schema.credential.id} != ${draft.credentialId}`
+  if (accountChanged) {
+    const [conflicting] = await db
+      .select({ id: schema.credential.id })
+      .from(schema.credential)
+      .where(
+        and(
+          eq(schema.credential.workspaceId, workspaceId),
+          eq(schema.credential.accountId, newAccountId),
+          sql`${schema.credential.id} != ${draft.credentialId}`
+        )
       )
-    )
-    .limit(1)
+      .limit(1)
 
-  if (conflicting) {
-    logger.warn('New account already used by another credential, skipping reconnect', {
-      credentialId: draft.credentialId,
-      newAccountId,
-      conflictingCredentialId: conflicting.id,
-    })
-    return
+    if (conflicting) {
+      logger.warn('New account already used by another credential, skipping reconnect', {
+        credentialId: draft.credentialId,
+        newAccountId,
+        conflictingCredentialId: conflicting.id,
+      })
+      return
+    }
   }
 
   await db
@@ -159,11 +158,16 @@ export async function handleReconnectCredential(params: {
     .set({ accountId: newAccountId, updatedAt: now })
     .where(eq(schema.credential.id, draft.credentialId))
 
-  logger.info('Reconnected credential to new account', {
-    credentialId: draft.credentialId,
-    oldAccountId,
-    newAccountId,
-  })
+  logger.info(
+    accountChanged
+      ? 'Reconnected credential to new account'
+      : 'Reconnected credential to the same account',
+    {
+      credentialId: draft.credentialId,
+      oldAccountId,
+      newAccountId,
+    }
+  )
 
   await clearDeadFlag(newAccountId)
 
@@ -174,7 +178,9 @@ export async function handleReconnectCredential(params: {
     resourceType: AuditResourceType.CREDENTIAL,
     resourceId: draft.credentialId,
     resourceName: draft.displayName,
-    description: `Reconnected OAuth credential "${draft.displayName}" to a new account`,
+    description: accountChanged
+      ? `Reconnected OAuth credential "${draft.displayName}" to a new account`
+      : `Reconnected OAuth credential "${draft.displayName}"`,
     metadata: { oldAccountId, newAccountId },
   })
 
diff --git a/apps/sim/lib/credentials/oauth-chat-attempt.test.ts b/apps/sim/lib/credentials/oauth-chat-attempt.test.ts
new file mode 100644
index 00000000000..090c0ec06ed
--- /dev/null
+++ b/apps/sim/lib/credentials/oauth-chat-attempt.test.ts
@@ -0,0 +1,134 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  addOAuthChatAttemptToAuthorizeUrl,
+  createOAuthChatAttempt,
+  getOAuthCredentialBaseline,
+  hasOAuthCredentialChanged,
+  OAUTH_CHAT_ATTEMPT_EVENT,
+  OAUTH_CHAT_ATTEMPT_PARAM,
+  readLatestOAuthChatAttempt,
+  resolveActiveDesktopOAuthChatAttempt,
+  setActiveDesktopOAuthChatAttempt,
+  setOAuthChatAttemptStatus,
+} from '@/lib/credentials/oauth-chat-attempt'
+
+describe('OAuth chat attempts', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+    window.history.replaceState({}, '', '/workspace/workspace-1/chat/chat-1')
+  })
+
+  it('carries the attempt through a generic OAuth callback URL', () => {
+    const authorizeUrl = addOAuthChatAttemptToAuthorizeUrl(
+      'https://sim.test/api/auth/oauth2/authorize?providerId=google-email&callbackURL=https%3A%2F%2Fsim.test%2Fworkspace%2Fworkspace-1%2Fchat%2Fchat-1',
+      'attempt-1'
+    )
+
+    const callbackUrl = new URL(new URL(authorizeUrl).searchParams.get('callbackURL') ?? '')
+    expect(callbackUrl.searchParams.get(OAUTH_CHAT_ATTEMPT_PARAM)).toBe('attempt-1')
+  })
+
+  it.each(['instagram', 'shopify', 'trello'])(
+    'carries the attempt through the %s return URL',
+    (provider) => {
+      const authorizeUrl = addOAuthChatAttemptToAuthorizeUrl(
+        `https://sim.test/api/auth/${provider}/authorize?returnUrl=${encodeURIComponent('https://sim.test/workspace/workspace-1/chat/chat-1')}`,
+        'attempt-2'
+      )
+
+      const returnUrl = new URL(new URL(authorizeUrl).searchParams.get('returnUrl') ?? '')
+      expect(returnUrl.searchParams.get(OAUTH_CHAT_ATTEMPT_PARAM)).toBe('attempt-2')
+    }
+  )
+
+  it('publishes and persists server-verified completion', () => {
+    let publishedStatus: string | undefined
+    window.addEventListener(
+      OAUTH_CHAT_ATTEMPT_EVENT,
+      ((event: CustomEvent) => {
+        publishedStatus = event.detail.status
+      }) as EventListener,
+      { once: true }
+    )
+
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      displayName: 'Gmail',
+      controlId: 'message-1:0:0',
+      baselineCredentialIds: [],
+    })
+    expect(publishedStatus).toBe('pending')
+
+    setOAuthChatAttemptStatus(attempt.id, 'connected')
+    expect(
+      readLatestOAuthChatAttempt({
+        workspaceId: 'workspace-1',
+        providerId: 'google-email',
+        controlId: 'message-1:0:0',
+      })?.status
+    ).toBe('connected')
+  })
+
+  it('resolves only the active desktop attempt', () => {
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'slack',
+      baseProviderId: 'slack',
+      displayName: 'Slack',
+      controlId: 'message-1:0:0',
+      baselineCredentialIds: [],
+    })
+    setActiveDesktopOAuthChatAttempt(attempt.id)
+
+    expect(resolveActiveDesktopOAuthChatAttempt('connected')?.id).toBe(attempt.id)
+    expect(resolveActiveDesktopOAuthChatAttempt('connected')).toBeNull()
+  })
+
+  it('requires a new matching credential instead of accepting an existing one', () => {
+    const before = [
+      { id: 'existing-gmail', providerId: 'google', updatedAt: '2026-08-07T10:00:00Z' },
+    ]
+    const target = {
+      providerId: 'google-email',
+      baseProviderId: 'google',
+    }
+    const baseline = getOAuthCredentialBaseline(target, before)
+
+    expect(hasOAuthCredentialChanged({ ...target, ...baseline }, before)).toBe(false)
+    expect(
+      hasOAuthCredentialChanged({ ...target, ...baseline }, [
+        ...before,
+        { id: 'new-gmail', providerId: 'google', updatedAt: '2026-08-07T10:05:00Z' },
+      ])
+    ).toBe(true)
+    expect(
+      hasOAuthCredentialChanged({ ...target, ...baseline }, [
+        ...before,
+        { id: 'new-slack', providerId: 'slack', updatedAt: '2026-08-07T10:05:00Z' },
+      ])
+    ).toBe(false)
+  })
+
+  it('requires the target credential to change for reconnect', () => {
+    const before = [{ id: 'gmail-1', providerId: 'google', updatedAt: '2026-08-07T10:00:00Z' }]
+    const target = {
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      credentialId: 'gmail-1',
+    }
+    const baseline = getOAuthCredentialBaseline(target, before)
+
+    expect(hasOAuthCredentialChanged({ ...target, ...baseline }, before)).toBe(false)
+    expect(
+      hasOAuthCredentialChanged({ ...target, ...baseline }, [
+        { ...before[0], updatedAt: '2026-08-07T10:05:00Z' },
+      ])
+    ).toBe(true)
+  })
+})
diff --git a/apps/sim/lib/credentials/oauth-chat-attempt.ts b/apps/sim/lib/credentials/oauth-chat-attempt.ts
new file mode 100644
index 00000000000..c9e5b3730fd
--- /dev/null
+++ b/apps/sim/lib/credentials/oauth-chat-attempt.ts
@@ -0,0 +1,235 @@
+'use client'
+
+import { generateShortId } from '@sim/utils/id'
+
+export const OAUTH_CHAT_ATTEMPT_PARAM = 'oauthAttempt'
+export const OAUTH_CHAT_ATTEMPT_EVENT = 'sim:oauth-chat-attempt'
+
+const OAUTH_CHAT_ATTEMPT_KEY_PREFIX = 'sim.oauth-chat-attempt.'
+const OAUTH_CHAT_LATEST_KEY_PREFIX = 'sim.oauth-chat-latest.'
+const ACTIVE_DESKTOP_ATTEMPT_KEY = 'sim.oauth-chat-active-desktop-attempt'
+export const OAUTH_CHAT_ATTEMPT_MAX_AGE_MS = 15 * 60 * 1000
+
+export type OAuthChatAttemptStatus = 'pending' | 'connected' | 'failed'
+
+export interface OAuthCredentialRecord {
+  id: string
+  providerId: string | null
+  updatedAt: string
+}
+
+export interface OAuthCredentialTarget {
+  providerId: string
+  baseProviderId: string
+  credentialId?: string
+}
+
+export interface OAuthCredentialBaseline {
+  baselineCredentialIds: string[]
+  baselineCredentialUpdatedAt?: string
+}
+
+export interface OAuthChatAttempt {
+  id: string
+  workspaceId: string
+  providerId: string
+  baseProviderId: string
+  displayName: string
+  controlId: string
+  credentialId?: string
+  baselineCredentialIds: string[]
+  baselineCredentialUpdatedAt?: string
+  requestedAt: number
+  status: OAuthChatAttemptStatus
+}
+
+interface CreateOAuthChatAttemptInput {
+  workspaceId: string
+  providerId: string
+  baseProviderId: string
+  displayName: string
+  controlId: string
+  credentialId?: string
+  baselineCredentialIds: string[]
+  baselineCredentialUpdatedAt?: string
+}
+
+function credentialsForTarget(
+  target: OAuthCredentialTarget,
+  credentials: readonly OAuthCredentialRecord[]
+): readonly OAuthCredentialRecord[] {
+  if (target.credentialId) {
+    return credentials.filter((credential) => credential.id === target.credentialId)
+  }
+  return credentials.filter(
+    (credential) =>
+      credential.providerId === target.providerId || credential.providerId === target.baseProviderId
+  )
+}
+
+/** Whether the workspace already holds a credential this chip would connect. */
+export function hasOAuthCredentialForTarget(
+  target: OAuthCredentialTarget,
+  credentials: readonly OAuthCredentialRecord[]
+): boolean {
+  return credentialsForTarget(target, credentials).length > 0
+}
+
+export function getOAuthCredentialBaseline(
+  target: OAuthCredentialTarget,
+  credentials: readonly OAuthCredentialRecord[]
+): OAuthCredentialBaseline {
+  const matchingCredentials = credentialsForTarget(target, credentials)
+  return {
+    baselineCredentialIds: matchingCredentials.map((credential) => credential.id),
+    baselineCredentialUpdatedAt: target.credentialId
+      ? matchingCredentials[0]?.updatedAt
+      : undefined,
+  }
+}
+
+export function hasOAuthCredentialChanged(
+  target: OAuthCredentialTarget & OAuthCredentialBaseline,
+  credentials: readonly OAuthCredentialRecord[]
+): boolean {
+  const matchingCredentials = credentialsForTarget(target, credentials)
+  if (target.credentialId) {
+    const credential = matchingCredentials[0]
+    if (!credential) return false
+    if (target.baselineCredentialUpdatedAt) {
+      return credential.updatedAt !== target.baselineCredentialUpdatedAt
+    }
+    return !target.baselineCredentialIds.includes(credential.id)
+  }
+  return matchingCredentials.some(
+    (credential) => !target.baselineCredentialIds.includes(credential.id)
+  )
+}
+
+function attemptStorageKey(attemptId: string): string {
+  return `${OAUTH_CHAT_ATTEMPT_KEY_PREFIX}${attemptId}`
+}
+
+function latestAttemptStorageKey(input: {
+  workspaceId: string
+  providerId: string
+  controlId: string
+  credentialId?: string
+}): string {
+  return `${OAUTH_CHAT_LATEST_KEY_PREFIX}${encodeURIComponent(input.workspaceId)}.${encodeURIComponent(input.providerId)}.${encodeURIComponent(input.controlId)}.${encodeURIComponent(input.credentialId ?? '')}`
+}
+
+function isOAuthChatAttempt(value: unknown): value is OAuthChatAttempt {
+  if (!value || typeof value !== 'object') return false
+  const candidate = value as Partial<OAuthChatAttempt>
+  return (
+    typeof candidate.id === 'string' &&
+    typeof candidate.workspaceId === 'string' &&
+    typeof candidate.providerId === 'string' &&
+    typeof candidate.baseProviderId === 'string' &&
+    typeof candidate.displayName === 'string' &&
+    typeof candidate.controlId === 'string' &&
+    typeof candidate.requestedAt === 'number' &&
+    (candidate.status === 'pending' ||
+      candidate.status === 'connected' ||
+      candidate.status === 'failed') &&
+    (candidate.credentialId === undefined || typeof candidate.credentialId === 'string') &&
+    Array.isArray(candidate.baselineCredentialIds) &&
+    candidate.baselineCredentialIds.every((credentialId) => typeof credentialId === 'string') &&
+    (candidate.baselineCredentialUpdatedAt === undefined ||
+      typeof candidate.baselineCredentialUpdatedAt === 'string')
+  )
+}
+
+function writeOAuthChatAttempt(attempt: OAuthChatAttempt): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(attemptStorageKey(attempt.id), JSON.stringify(attempt))
+  window.localStorage.setItem(latestAttemptStorageKey(attempt), attempt.id)
+  window.dispatchEvent(
+    new CustomEvent<OAuthChatAttempt>(OAUTH_CHAT_ATTEMPT_EVENT, { detail: attempt })
+  )
+}
+
+export function createOAuthChatAttempt(input: CreateOAuthChatAttemptInput): OAuthChatAttempt {
+  const attempt: OAuthChatAttempt = {
+    ...input,
+    id: generateShortId(24),
+    requestedAt: Date.now(),
+    status: 'pending',
+  }
+  writeOAuthChatAttempt(attempt)
+  return attempt
+}
+
+export function readOAuthChatAttempt(attemptId: string): OAuthChatAttempt | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const parsed = JSON.parse(
+      window.localStorage.getItem(attemptStorageKey(attemptId)) ?? 'null'
+    ) as unknown
+    return isOAuthChatAttempt(parsed) ? parsed : null
+  } catch {
+    return null
+  }
+}
+
+export function readLatestOAuthChatAttempt(input: {
+  workspaceId: string
+  providerId: string
+  controlId: string
+  credentialId?: string
+}): OAuthChatAttempt | null {
+  if (typeof window === 'undefined') return null
+  const attemptId = window.localStorage.getItem(latestAttemptStorageKey(input))
+  if (!attemptId) return null
+  const attempt = readOAuthChatAttempt(attemptId)
+  if (!attempt || Date.now() - attempt.requestedAt > OAUTH_CHAT_ATTEMPT_MAX_AGE_MS) return null
+  return attempt
+}
+
+export function setOAuthChatAttemptStatus(
+  attemptId: string,
+  status: OAuthChatAttemptStatus
+): OAuthChatAttempt | null {
+  const attempt = readOAuthChatAttempt(attemptId)
+  if (!attempt) return null
+  const updated = { ...attempt, status }
+  writeOAuthChatAttempt(updated)
+  return updated
+}
+
+export function setActiveDesktopOAuthChatAttempt(attemptId: string): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(ACTIVE_DESKTOP_ATTEMPT_KEY, attemptId)
+}
+
+export function resolveActiveDesktopOAuthChatAttempt(
+  status: Extract<OAuthChatAttemptStatus, 'connected' | 'failed'>
+): OAuthChatAttempt | null {
+  if (typeof window === 'undefined') return null
+  const attemptId = window.localStorage.getItem(ACTIVE_DESKTOP_ATTEMPT_KEY)
+  if (!attemptId) return null
+  window.localStorage.removeItem(ACTIVE_DESKTOP_ATTEMPT_KEY)
+  return setOAuthChatAttemptStatus(attemptId, status)
+}
+
+function appendAttemptToReturnUrl(rawReturnUrl: string, attemptId: string): string {
+  const returnUrl = new URL(rawReturnUrl, window.location.origin)
+  returnUrl.searchParams.set(OAUTH_CHAT_ATTEMPT_PARAM, attemptId)
+  return returnUrl.toString()
+}
+
+/** Adds the attempt id to the eventual same-origin OAuth return URL. */
+export function addOAuthChatAttemptToAuthorizeUrl(rawUrl: string, attemptId: string): string {
+  const authorizeUrl = new URL(rawUrl, window.location.origin)
+  const returnParam = authorizeUrl.searchParams.has('callbackURL') ? 'callbackURL' : 'returnUrl'
+  const rawReturnUrl = authorizeUrl.searchParams.get(returnParam)
+
+  if (rawReturnUrl) {
+    authorizeUrl.searchParams.set(returnParam, appendAttemptToReturnUrl(rawReturnUrl, attemptId))
+  } else {
+    authorizeUrl.searchParams.set(OAUTH_CHAT_ATTEMPT_PARAM, attemptId)
+  }
+
+  return authorizeUrl.toString()
+}

From 5ba1185a451a0ea09219fc6a4a9f8078a07115b4 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Fri, 7 Aug 2026 12:43:49 -0700
Subject: [PATCH 2/2] fixes

---
 apps/desktop/src/main/handoff.test.ts         | 64 +++++++++++++++
 apps/desktop/src/main/handoff.ts              | 78 +++++++++++++------
 apps/desktop/src/main/ipc.test.ts             | 12 ++-
 apps/desktop/src/main/ipc.ts                  | 14 +++-
 .../special-tags/use-oauth-chip-connection.ts |  7 +-
 apps/sim/hooks/use-oauth-return.ts            |  4 +-
 .../credentials/oauth-chat-attempt.test.ts    | 60 ++++++++++++++
 .../sim/lib/credentials/oauth-chat-attempt.ts | 25 ++++++
 packages/desktop-bridge/src/index.ts          |  7 ++
 9 files changed, 240 insertions(+), 31 deletions(-)

diff --git a/apps/desktop/src/main/handoff.test.ts b/apps/desktop/src/main/handoff.test.ts
index f594bf2b562..12feb6395e8 100644
--- a/apps/desktop/src/main/handoff.test.ts
+++ b/apps/desktop/src/main/handoff.test.ts
@@ -8,9 +8,11 @@ import {
   buildRedeemScript,
   type ConnectHandoffCallback,
   createAuthFlow,
+  createConnectFlow,
   createHandoffManager,
   type HandoffCallback,
   type HandoffCallbacks,
+  type HandoffManager,
   type HandoffManagerDeps,
 } from '@/main/handoff'
 import type { EventRecorder } from '@/main/observability'
@@ -241,6 +243,24 @@ describe('createHandoffManager', () => {
     expect(manager.consume(state, 'login')).toBe(false)
     expect(manager.consume(state, 'connect')).toBe(true)
   })
+
+  it('returns the chat attempt correlated with the accepted connect state', async () => {
+    const deps = makeDeps()
+    const manager = createHandoffManager(deps, makeCallbacks())
+    await manager.beginConnect('google-email', {
+      workspaceId: 'workspace-1',
+      chatAttemptId: 'attempt-1',
+    })
+    const state = new URL(vi.mocked(deps.openExternal).mock.calls[0][0]).searchParams.get(
+      'state'
+    ) as string
+
+    expect(manager.consumeConnect(state)).toEqual({
+      workspaceId: 'workspace-1',
+      chatAttemptId: 'attempt-1',
+    })
+    expect(manager.consumeConnect(state)).toBeNull()
+  })
 })
 
 describe('connect handoff account pinning', () => {
@@ -273,6 +293,50 @@ describe('connect handoff account pinning', () => {
   })
 })
 
+describe('connect completion correlation', () => {
+  function makeConnectManager(scope: { chatAttemptId?: string }): HandoffManager {
+    return {
+      begin: vi.fn(async () => true),
+      beginConnect: vi.fn(async () => true),
+      consume: vi.fn(() => true),
+      consumeConnect: vi.fn(() => scope),
+      clear: vi.fn(),
+    }
+  }
+
+  it('echoes the accepted handoff chat attempt to the renderer', () => {
+    const notifyRenderer = vi.fn()
+    const flow = createConnectFlow({
+      handoff: makeConnectManager({ chatAttemptId: 'attempt-1' }),
+      events: makeEvents(),
+      focusMainWindow: vi.fn(),
+      notifyRenderer,
+    })
+
+    flow.handleCallback({ state: VALID_STATE })
+
+    expect(notifyRenderer).toHaveBeenCalledWith({ ok: true, chatAttemptId: 'attempt-1' })
+  })
+
+  it('marks ordinary integrations-page completions as explicitly uncorrelated', () => {
+    const notifyRenderer = vi.fn()
+    const flow = createConnectFlow({
+      handoff: makeConnectManager({}),
+      events: makeEvents(),
+      focusMainWindow: vi.fn(),
+      notifyRenderer,
+    })
+
+    flow.handleCallback({ state: VALID_STATE, error: 'oauth_failed' })
+
+    expect(notifyRenderer).toHaveBeenCalledWith({
+      ok: false,
+      error: 'oauth_failed',
+      chatAttemptId: null,
+    })
+  })
+})
+
 describe('createAuthFlow window failures', () => {
   function makeAuthDeps(ensureMainWindow: () => Promise<never>) {
     const events = makeEvents()
diff --git a/apps/desktop/src/main/handoff.ts b/apps/desktop/src/main/handoff.ts
index 5d1313ebc56..dc5d15b52e3 100644
--- a/apps/desktop/src/main/handoff.ts
+++ b/apps/desktop/src/main/handoff.ts
@@ -67,12 +67,14 @@ export interface HandoffManagerDeps {
 export interface ConnectScope {
   workspaceId?: string
   credentialId?: string
+  chatAttemptId?: string
 }
 
 export interface HandoffManager {
   begin(): Promise<boolean>
   beginConnect(providerId: string, scope?: ConnectScope): Promise<boolean>
   consume(state: string, kind: HandoffKind): boolean
+  consumeConnect(state: string): ConnectScope | null
   clear(): void
 }
 
@@ -92,7 +94,12 @@ export function createHandoffManager(
   const now = deps.now ?? Date.now
   let loopbackServer: Server | null = null
   let loopbackTimer: NodeJS.Timeout | undefined
-  let pending: { state: string; createdAt: number; kind: HandoffKind } | null = null
+  let pending: {
+    state: string
+    createdAt: number
+    kind: HandoffKind
+    connectScope?: ConnectScope
+  } | null = null
 
   const stopLoopback = () => {
     clearTimeout(loopbackTimer)
@@ -214,10 +221,23 @@ export function createHandoffManager(
     pending = null
   }
 
+  const consumePending = (state: string, kind: HandoffKind): NonNullable<typeof pending> | null => {
+    if (!pending || pending.kind !== kind) return null
+    if (now() - pending.createdAt > HANDOFF_TTL_MS) {
+      clear()
+      return null
+    }
+    if (!safeCompare(pending.state, state)) return null
+    const consumed = pending
+    clear()
+    return consumed
+  }
+
   const beginFlow = async (
     kind: HandoffKind,
     landingPath: string,
-    params: Record<string, string>
+    params: Record<string, string>,
+    connectScope?: ConnectScope
   ): Promise<boolean> => {
     const state = generateShortId(STATE_LENGTH)
     // startLoopback() already tore down any prior server; if this bind fails,
@@ -228,7 +248,12 @@ export function createHandoffManager(
       clear()
       return false
     }
-    pending = { state, createdAt: now(), kind }
+    pending = {
+      state,
+      createdAt: now(),
+      kind,
+      ...(connectScope ? { connectScope: { ...connectScope } } : {}),
+    }
     const landing = new URL(landingPath, deps.origin())
     for (const [key, value] of Object.entries(params)) {
       landing.searchParams.set(key, value)
@@ -259,26 +284,24 @@ export function createHandoffManager(
       // unknown (offline, signed out): the page then falls back to its normal
       // login redirect rather than blocking a connect on a failed probe.
       const userId = await deps.currentUserId()
-      return beginFlow('connect', '/desktop/connect', {
-        provider: providerId,
-        ...(userId ? { user: userId } : {}),
-        ...(scope.workspaceId ? { workspaceId: scope.workspaceId } : {}),
-        ...(scope.credentialId ? { credentialId: scope.credentialId } : {}),
-      })
+      return beginFlow(
+        'connect',
+        '/desktop/connect',
+        {
+          provider: providerId,
+          ...(userId ? { user: userId } : {}),
+          ...(scope.workspaceId ? { workspaceId: scope.workspaceId } : {}),
+          ...(scope.credentialId ? { credentialId: scope.credentialId } : {}),
+        },
+        scope
+      )
     },
     consume(state: string, kind: HandoffKind) {
-      if (!pending || pending.kind !== kind) {
-        return false
-      }
-      if (now() - pending.createdAt > HANDOFF_TTL_MS) {
-        clear()
-        return false
-      }
-      if (!safeCompare(pending.state, state)) {
-        return false
-      }
-      clear()
-      return true
+      return consumePending(state, kind) !== null
+    },
+    consumeConnect(state: string) {
+      const consumed = consumePending(state, 'connect')
+      return consumed ? { ...(consumed.connectScope ?? {}) } : null
     },
     clear,
   }
@@ -443,6 +466,8 @@ export function createAuthFlow(deps: AuthFlowDeps): AuthFlow {
 export interface ConnectHandoffResult {
   ok: boolean
   error?: string
+  /** Exact Mothership chat attempt, or null for ordinary integration flows. */
+  chatAttemptId: string | null
 }
 
 export interface ConnectFlowDeps {
@@ -476,19 +501,24 @@ export function createConnectFlow(deps: ConnectFlowDeps): ConnectFlow {
       return opened
     },
     handleCallback(callback: ConnectHandoffCallback) {
-      if (!deps.handoff.consume(callback.state, 'connect')) {
+      const scope = deps.handoff.consumeConnect(callback.state)
+      if (!scope) {
         deps.events.record('connect_handoff_state_fail')
         return
       }
       if (callback.error === undefined) {
         deps.events.record('connect_handoff_ok')
         deps.focusMainWindow()
-        deps.notifyRenderer({ ok: true })
+        deps.notifyRenderer({ ok: true, chatAttemptId: scope.chatAttemptId ?? null })
         return
       }
       deps.events.record('connect_handoff_error', { error: callback.error })
       deps.focusMainWindow()
-      deps.notifyRenderer({ ok: false, error: callback.error })
+      deps.notifyRenderer({
+        ok: false,
+        error: callback.error,
+        chatAttemptId: scope.chatAttemptId ?? null,
+      })
     },
   }
 }
diff --git a/apps/desktop/src/main/ipc.test.ts b/apps/desktop/src/main/ipc.test.ts
index 0d2a554524c..0376da1a065 100644
--- a/apps/desktop/src/main/ipc.test.ts
+++ b/apps/desktop/src/main/ipc.test.ts
@@ -337,14 +337,20 @@ describe('registerIpcHandlers', () => {
 
     // Chip-initiated connects carry workspace/credential scope; malformed
     // scopes (wrong types, unsafe ids) are rejected before the handoff.
-    expect(await handler?.(appEvent, 'slack', { workspaceId: 'ws1', credentialId: 'cred_1' })).toBe(
-      true
-    )
+    expect(
+      await handler?.(appEvent, 'slack', {
+        workspaceId: 'ws1',
+        credentialId: 'cred_1',
+        chatAttemptId: 'attempt_1',
+      })
+    ).toBe(true)
     expect(deps.beginOAuthConnect).toHaveBeenCalledWith('slack', {
       workspaceId: 'ws1',
       credentialId: 'cred_1',
+      chatAttemptId: 'attempt_1',
     })
     expect(await handler?.(appEvent, 'slack', { workspaceId: 'ws/../evil' })).toBe(false)
+    expect(await handler?.(appEvent, 'slack', { chatAttemptId: '../wrong' })).toBe(false)
     expect(await handler?.(appEvent, 'slack', 'not-an-object')).toBe(false)
   })
 
diff --git a/apps/desktop/src/main/ipc.ts b/apps/desktop/src/main/ipc.ts
index 8d0c34ea876..93f95b8d6b3 100644
--- a/apps/desktop/src/main/ipc.ts
+++ b/apps/desktop/src/main/ipc.ts
@@ -90,6 +90,7 @@ function parseDesktopScope(raw: unknown): string | null {
 export interface OAuthConnectScope {
   workspaceId?: string
   credentialId?: string
+  chatAttemptId?: string
 }
 
 /**
@@ -104,7 +105,11 @@ export function parseOAuthConnectScope(raw: unknown): OAuthConnectScope | undefi
   if (typeof raw !== 'object') {
     return undefined
   }
-  const { workspaceId, credentialId } = raw as { workspaceId?: unknown; credentialId?: unknown }
+  const { workspaceId, credentialId, chatAttemptId } = raw as {
+    workspaceId?: unknown
+    credentialId?: unknown
+    chatAttemptId?: unknown
+  }
   if (
     workspaceId !== undefined &&
     (typeof workspaceId !== 'string' || !ID_PATTERN.test(workspaceId))
@@ -117,9 +122,16 @@ export function parseOAuthConnectScope(raw: unknown): OAuthConnectScope | undefi
   ) {
     return undefined
   }
+  if (
+    chatAttemptId !== undefined &&
+    (typeof chatAttemptId !== 'string' || !ID_PATTERN.test(chatAttemptId))
+  ) {
+    return undefined
+  }
   return {
     ...(workspaceId !== undefined ? { workspaceId } : {}),
     ...(credentialId !== undefined ? { credentialId } : {}),
+    ...(chatAttemptId !== undefined ? { chatAttemptId } : {}),
   }
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
index 0cf00a30a3c..74c4b95ebb4 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
 import {
   addOAuthChatAttemptToAuthorizeUrl,
+  clearActiveDesktopOAuthChatAttempt,
   createOAuthChatAttempt,
   getOAuthCredentialBaseline,
   hasOAuthCredentialChanged,
@@ -315,9 +316,13 @@ export function useOAuthChipConnection({
           .beginOAuthConnect(providerId, {
             workspaceId: url.searchParams.get('workspaceId') ?? workspaceId,
             credentialId: url.searchParams.get('credentialId') ?? undefined,
+            chatAttemptId: attempt.id,
           })
           .then((opened) => {
-            if (!opened) setOAuthChatAttemptStatus(attempt.id, 'failed')
+            if (!opened) {
+              clearActiveDesktopOAuthChatAttempt(attempt.id)
+              setOAuthChatAttemptStatus(attempt.id, 'failed')
+            }
           })
         return
       }
diff --git a/apps/sim/hooks/use-oauth-return.ts b/apps/sim/hooks/use-oauth-return.ts
index a5a97017b17..5b2092c44cb 100644
--- a/apps/sim/hooks/use-oauth-return.ts
+++ b/apps/sim/hooks/use-oauth-return.ts
@@ -19,7 +19,7 @@ import {
   OAUTH_CHAT_ATTEMPT_MAX_AGE_MS,
   OAUTH_CHAT_ATTEMPT_PARAM,
   readOAuthChatAttempt,
-  resolveActiveDesktopOAuthChatAttempt,
+  resolveDesktopOAuthChatAttempt,
   setOAuthChatAttemptStatus,
 } from '@/lib/credentials/oauth-chat-attempt'
 import { getDesktopBridge } from '@/lib/desktop'
@@ -266,7 +266,7 @@ export function useDesktopOAuthConnectListener() {
       const rawCtx = readOAuthReturnContext()
       if (rawCtx) consumeOAuthReturnContext()
       const ctx = rawCtx && Date.now() - rawCtx.requestedAt <= CONTEXT_MAX_AGE_MS ? rawCtx : null
-      const chatAttempt = resolveActiveDesktopOAuthChatAttempt(result.ok ? 'connected' : 'failed')
+      const chatAttempt = resolveDesktopOAuthChatAttempt(result, result.ok ? 'connected' : 'failed')
 
       if (!result.ok) {
         toast.error('The account connection didn’t finish. Try connecting again.')
diff --git a/apps/sim/lib/credentials/oauth-chat-attempt.test.ts b/apps/sim/lib/credentials/oauth-chat-attempt.test.ts
index 090c0ec06ed..3a20b017316 100644
--- a/apps/sim/lib/credentials/oauth-chat-attempt.test.ts
+++ b/apps/sim/lib/credentials/oauth-chat-attempt.test.ts
@@ -11,7 +11,9 @@ import {
   OAUTH_CHAT_ATTEMPT_EVENT,
   OAUTH_CHAT_ATTEMPT_PARAM,
   readLatestOAuthChatAttempt,
+  readOAuthChatAttempt,
   resolveActiveDesktopOAuthChatAttempt,
+  resolveDesktopOAuthChatAttempt,
   setActiveDesktopOAuthChatAttempt,
   setOAuthChatAttemptStatus,
 } from '@/lib/credentials/oauth-chat-attempt'
@@ -90,6 +92,64 @@ describe('OAuth chat attempts', () => {
     expect(resolveActiveDesktopOAuthChatAttempt('connected')).toBeNull()
   })
 
+  it('resolves the exact correlated desktop attempt without consuming a sibling', () => {
+    const first = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'slack',
+      baseProviderId: 'slack',
+      displayName: 'Slack',
+      controlId: 'message-1:0:0',
+      baselineCredentialIds: [],
+    })
+    const second = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'google-email',
+      baseProviderId: 'google',
+      displayName: 'Gmail',
+      controlId: 'message-1:0:1',
+      baselineCredentialIds: [],
+    })
+    setActiveDesktopOAuthChatAttempt(second.id)
+
+    expect(resolveDesktopOAuthChatAttempt({ chatAttemptId: first.id }, 'connected')?.id).toBe(
+      first.id
+    )
+    expect(readOAuthChatAttempt(first.id)?.status).toBe('connected')
+    expect(readOAuthChatAttempt(second.id)?.status).toBe('pending')
+    expect(resolveActiveDesktopOAuthChatAttempt('failed')?.id).toBe(second.id)
+  })
+
+  it('does not consume a chat attempt for a correlated ordinary desktop flow', () => {
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'slack',
+      baseProviderId: 'slack',
+      displayName: 'Slack',
+      controlId: 'message-1:0:0',
+      baselineCredentialIds: [],
+    })
+    setActiveDesktopOAuthChatAttempt(attempt.id)
+
+    expect(resolveDesktopOAuthChatAttempt({ chatAttemptId: null }, 'connected')).toBeNull()
+    expect(readOAuthChatAttempt(attempt.id)?.status).toBe('pending')
+    expect(resolveActiveDesktopOAuthChatAttempt('connected')?.id).toBe(attempt.id)
+  })
+
+  it('falls back to the active attempt for an older desktop completion payload', () => {
+    const attempt = createOAuthChatAttempt({
+      workspaceId: 'workspace-1',
+      providerId: 'slack',
+      baseProviderId: 'slack',
+      displayName: 'Slack',
+      controlId: 'message-1:0:0',
+      baselineCredentialIds: [],
+    })
+    setActiveDesktopOAuthChatAttempt(attempt.id)
+
+    expect(resolveDesktopOAuthChatAttempt({}, 'connected')?.id).toBe(attempt.id)
+    expect(readOAuthChatAttempt(attempt.id)?.status).toBe('connected')
+  })
+
   it('requires a new matching credential instead of accepting an existing one', () => {
     const before = [
       { id: 'existing-gmail', providerId: 'google', updatedAt: '2026-08-07T10:00:00Z' },
diff --git a/apps/sim/lib/credentials/oauth-chat-attempt.ts b/apps/sim/lib/credentials/oauth-chat-attempt.ts
index c9e5b3730fd..65ad90a3a31 100644
--- a/apps/sim/lib/credentials/oauth-chat-attempt.ts
+++ b/apps/sim/lib/credentials/oauth-chat-attempt.ts
@@ -203,6 +203,13 @@ export function setActiveDesktopOAuthChatAttempt(attemptId: string): void {
   window.localStorage.setItem(ACTIVE_DESKTOP_ATTEMPT_KEY, attemptId)
 }
 
+export function clearActiveDesktopOAuthChatAttempt(attemptId: string): void {
+  if (typeof window === 'undefined') return
+  if (window.localStorage.getItem(ACTIVE_DESKTOP_ATTEMPT_KEY) === attemptId) {
+    window.localStorage.removeItem(ACTIVE_DESKTOP_ATTEMPT_KEY)
+  }
+}
+
 export function resolveActiveDesktopOAuthChatAttempt(
   status: Extract<OAuthChatAttemptStatus, 'connected' | 'failed'>
 ): OAuthChatAttempt | null {
@@ -213,6 +220,24 @@ export function resolveActiveDesktopOAuthChatAttempt(
   return setOAuthChatAttemptStatus(attemptId, status)
 }
 
+/**
+ * Resolves the exact chat attempt echoed by a current desktop shell. A null
+ * correlation explicitly means an ordinary integrations-page flow and must
+ * not consume a stale chat attempt. Only legacy shells omit the field, in
+ * which case the former single-active-attempt behavior remains as a fallback.
+ */
+export function resolveDesktopOAuthChatAttempt(
+  result: { chatAttemptId?: string | null },
+  status: Extract<OAuthChatAttemptStatus, 'connected' | 'failed'>
+): OAuthChatAttempt | null {
+  if (Object.hasOwn(result, 'chatAttemptId')) {
+    if (!result.chatAttemptId) return null
+    clearActiveDesktopOAuthChatAttempt(result.chatAttemptId)
+    return setOAuthChatAttemptStatus(result.chatAttemptId, status)
+  }
+  return resolveActiveDesktopOAuthChatAttempt(status)
+}
+
 function appendAttemptToReturnUrl(rawReturnUrl: string, attemptId: string): string {
   const returnUrl = new URL(rawReturnUrl, window.location.origin)
   returnUrl.searchParams.set(OAUTH_CHAT_ATTEMPT_PARAM, attemptId)
diff --git a/packages/desktop-bridge/src/index.ts b/packages/desktop-bridge/src/index.ts
index b4404aab108..f6c3b759c1d 100644
--- a/packages/desktop-bridge/src/index.ts
+++ b/packages/desktop-bridge/src/index.ts
@@ -614,6 +614,11 @@ export interface DesktopOAuthConnectResult {
   ok: boolean
   /** OAuth error slug forwarded from the provider callback, when the flow failed. */
   error?: string
+  /**
+   * Chat attempt correlated by the desktop handoff, or null for a non-chat
+   * connect. Absent only on older desktop shells that predate correlation.
+   */
+  chatAttemptId?: string | null
 }
 
 /**
@@ -625,6 +630,8 @@ export interface DesktopOAuthConnectResult {
 export interface DesktopOAuthConnectScope {
   workspaceId?: string
   credentialId?: string
+  /** Mothership credential-chip attempt to echo on desktop completion. */
+  chatAttemptId?: string
 }
 
 export interface TerminalThemePalette {