From 0cad262bd433c064c59aa2683d084c39bf3247c1 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Sun, 20 Sep 2026 18:47:32 -0700
Subject: [PATCH 1/2] improvement(ui): reuse shared product status pages

---
 .../components/error-state/error-state.tsx    | 18 +++++++---------
 .../app/oauth/credential-connected/page.tsx   | 21 +++++++++----------
 .../components/status-page/status-page.tsx    |  2 +-
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
index 31aa3527fb9..fba297d34d8 100644
--- a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Button } from '@sim/emcn'
+import { Chip, StatusPageContent } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
@@ -13,19 +13,17 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
 
   return (
     <div className='flex flex-1 items-center justify-center px-4 py-16 text-center'>
-      <div className='flex w-full max-w-[410px] flex-col items-center gap-3'>
-        <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-          Chat Unavailable
-        </h1>
-        <p className='text-[var(--text-muted)] text-lg'>{error}</p>
-        <Button
+      <StatusPageContent title='Chat Unavailable' description={error}>
+        <Chip
+          type='button'
           variant='primary'
+          fullWidth
+          className='text-center'
           onClick={() => router.push(APP_ENTRY_PATH)}
-          className='h-[32px] w-full gap-2 px-2.5 text-sm'
         >
           Open Sim
-        </Button>
-      </div>
+        </Chip>
+      </StatusPageContent>
     </div>
   )
 }
diff --git a/apps/sim/app/oauth/credential-connected/page.tsx b/apps/sim/app/oauth/credential-connected/page.tsx
index 731d2528983..df4fe94a113 100644
--- a/apps/sim/app/oauth/credential-connected/page.tsx
+++ b/apps/sim/app/oauth/credential-connected/page.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, StatusPageContent } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { LogoShell } from '@/app/(landing)/components/logo-shell'
@@ -22,19 +22,18 @@ export default async function CredentialConnectedPage({
 
   return (
     <LogoShell center>
-      <div className='flex w-full max-w-[410px] flex-col items-center gap-3 text-center'>
-        <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-          {connected ? 'Credential connected' : 'Connection failed'}
-        </h1>
-        <p className='text-pretty text-[var(--text-muted)] text-lg'>
-          {connected
+      <StatusPageContent
+        title={connected ? 'Credential connected' : 'Connection failed'}
+        description={
+          connected
             ? 'The credential is ready to use. You can close this tab and return to the app that started the connection.'
-            : 'The credential could not be connected. Return to the app that started the connection and try again.'}
-        </p>
-        <ChipLink variant='primary' href={APP_ENTRY_PATH} className='mt-3'>
+            : 'The credential could not be connected. Return to the app that started the connection and try again.'
+        }
+      >
+        <ChipLink variant='primary' href={APP_ENTRY_PATH}>
           Open Sim
         </ChipLink>
-      </div>
+      </StatusPageContent>
     </LogoShell>
   )
 }
diff --git a/packages/emcn/src/components/status-page/status-page.tsx b/packages/emcn/src/components/status-page/status-page.tsx
index 839c520a30f..c07923f5e6d 100644
--- a/packages/emcn/src/components/status-page/status-page.tsx
+++ b/packages/emcn/src/components/status-page/status-page.tsx
@@ -29,7 +29,7 @@ export function StatusPageContent({
         {title}
       </h1>
       <p className='text-[var(--text-body)] text-lg'>{description}</p>
-      <div className='mt-3 flex flex-wrap items-center justify-center gap-2'>{children}</div>
+      <div className='mt-3 flex w-full flex-wrap items-center justify-center gap-2'>{children}</div>
       {detail}
     </div>
   )

From 20238326464bd3e7ed234cc12d7944876738bfe2 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Sun, 20 Sep 2026 18:55:37 -0700
Subject: [PATCH 2/2] fix(ui): preserve the existing chat recovery button

---
 .../chat/components/error-state/error-state.tsx          | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
index fba297d34d8..c91c687b41e 100644
--- a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, StatusPageContent } from '@sim/emcn'
+import { Button, StatusPageContent } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
@@ -14,15 +14,14 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
   return (
     <div className='flex flex-1 items-center justify-center px-4 py-16 text-center'>
       <StatusPageContent title='Chat Unavailable' description={error}>
-        <Chip
+        <Button
           type='button'
           variant='primary'
-          fullWidth
-          className='text-center'
+          className='h-[32px] w-full gap-2 px-2.5 text-sm'
           onClick={() => router.push(APP_ENTRY_PATH)}
         >
           Open Sim
-        </Chip>
+        </Button>
       </StatusPageContent>
     </div>
   )