From 8fda826a7336d2d4fa6884d038da12838e4fcf64 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 21 May 2026 17:23:32 -0500
Subject: [PATCH 1/3] add contact support to update status

---
 app/pages/system/UpdatePage.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index 4fd9ca524..fefa4941f 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -191,6 +191,20 @@ export default function UpdatePage() {
         >
           {status.suspended ? 'Yes' : 'No'}
         </PropertiesTable.Row>
+        <PropertiesTable.Row
+          label={
+            <>
+              Contact support?{' '}
+              <TipIcon className="ml-1.5">
+                If yes, the system has detected one or more known conditions that require
+                Oxide support to resolve. Contact support before starting any update, and
+                immediately if an update has recently completed.
+              </TipIcon>
+            </>
+          }
+        >
+          {status.contactSupport ? 'Yes' : 'No'}
+        </PropertiesTable.Row>
       </PropertiesTable>
 
       <Divider className="my-8" />

From 657f7ed98a5bd16b1d3b608ad2b8c124dae3ccfe Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 21 May 2026 18:21:12 -0500
Subject: [PATCH 2/3] try it as a banner

---
 app/pages/system/UpdatePage.tsx | 28 +++++++++++++++++-----------
 mock-api/system-update.ts       |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index fefa4941f..c14c0d9a2 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -38,6 +38,7 @@ import { CardBlock } from '~/ui/lib/CardBlock'
 import { DateTime } from '~/ui/lib/DateTime'
 import { Divider } from '~/ui/lib/Divider'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
+import { Message } from '~/ui/lib/Message'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { TipIcon } from '~/ui/lib/TipIcon'
@@ -191,21 +192,26 @@ export default function UpdatePage() {
         >
           {status.suspended ? 'Yes' : 'No'}
         </PropertiesTable.Row>
-        <PropertiesTable.Row
-          label={
+      </PropertiesTable>
+
+      {status.contactSupport && (
+        <Message
+          className="mt-4"
+          variant="notice"
+          title="Contact Oxide support"
+          content={
             <>
-              Contact support?{' '}
-              <TipIcon className="ml-1.5">
-                If yes, the system has detected one or more known conditions that require
-                Oxide support to resolve. Contact support before starting any update, and
-                immediately if an update has recently completed.
+              The system has detected one or more known conditions that require Oxide
+              support to resolve.{' '}
+              <TipIcon className="ml-0.5 [&>svg]:text-[var(--content-accent-secondary)]">
+                Contact support before starting any update, and immediately if an update has
+                recently completed. The checks underlying this state are not exhaustive, so
+                the absence of this message does not mean the system is completely healthy.
               </TipIcon>
             </>
           }
-        >
-          {status.contactSupport ? 'Yes' : 'No'}
-        </PropertiesTable.Row>
-      </PropertiesTable>
+        />
+      )}
 
       <Divider className="my-8" />
 
diff --git a/mock-api/system-update.ts b/mock-api/system-update.ts
index 5285352ef..fd127164a 100644
--- a/mock-api/system-update.ts
+++ b/mock-api/system-update.ts
@@ -36,7 +36,7 @@ export const updateStatus: Json<UpdateStatus> = {
     '17.0.0': 12,
     '16.0.0': 5,
   },
-  contact_support: false,
+  contact_support: true,
   suspended: false,
   target_release: {
     version: '17.0.0',

From 9189e83b6df128a771fe49b11e136185b12baf0e Mon Sep 17 00:00:00 2001
From: benjaminleonard <benji@oxide.computer>
Date: Fri, 29 May 2026 17:58:19 +0100
Subject: [PATCH 3/3] Tweak contact support treatment

This is the only CTA usage so happy to switch it to accommodate and we can revisit should it not feel appropriate for other CTA types.
---
 app/pages/system/UpdatePage.tsx | 16 +++++++++-------
 app/ui/lib/Message.tsx          | 12 ++++++++----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index c14c0d9a2..bf2753aae 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -8,6 +8,7 @@
 
 import { differenceInMinutes } from 'date-fns'
 import { useMemo } from 'react'
+import { Link } from 'react-router'
 import * as R from 'remeda'
 import { lt as semverLt } from 'semver'
 
@@ -198,18 +199,19 @@ export default function UpdatePage() {
         <Message
           className="mt-4"
           variant="notice"
-          title="Contact Oxide support"
+          title="Support required"
           content={
             <>
               The system has detected one or more known conditions that require Oxide
-              support to resolve.{' '}
-              <TipIcon className="ml-0.5 [&>svg]:text-[var(--content-accent-secondary)]">
-                Contact support before starting any update, and immediately if an update has
-                recently completed. The checks underlying this state are not exhaustive, so
-                the absence of this message does not mean the system is completely healthy.
-              </TipIcon>
+              support to resolve. Contact support (
+              <Link to="mailto:support@oxide.computer">support@oxide.computer</Link>) before
+              starting any update, and immediately if an update has recently completed.
             </>
           }
+          cta={{
+            text: 'Contact Support',
+            link: 'mailto:support@oxide.computer',
+          }}
         />
       )}
 
diff --git a/app/ui/lib/Message.tsx b/app/ui/lib/Message.tsx
index 4c5f50e0c..4aefc4169 100644
--- a/app/ui/lib/Message.tsx
+++ b/app/ui/lib/Message.tsx
@@ -10,8 +10,8 @@ import type { ReactElement, ReactNode } from 'react'
 import { Link, type To } from 'react-router'
 
 import {
+  DirectionRightIcon,
   Error12Icon,
-  OpenLink12Icon,
   Success12Icon,
   Warning12Icon,
 } from '@oxide/design-system/icons/react'
@@ -21,6 +21,7 @@ type Variant = 'success' | 'error' | 'notice' | 'info'
 export interface MessageProps {
   title?: string
   content: ReactNode
+  append?: ReactNode
   className?: string
   variant?: Variant
   cta?: {
@@ -48,6 +49,7 @@ export const Message = ({
   title,
   // TODO: convert content to a children prop
   content,
+  append,
   className,
   variant = 'info',
   cta,
@@ -70,19 +72,21 @@ export const Message = ({
       <div className="flex-1">
         {title && <div className="text-sans-semi-md">{title}</div>}
         {/* group gives HL the right color */}
-        <div className="text-sans-md text-accent-secondary [&>a]:tint-underline group">
+        <div className="text-sans-md text-accent-secondary [&>a]:tint-underline group max-w-3xl">
           {content}
         </div>
 
         {cta && (
           <Link
-            className="text-sans-md text-accent-secondary hover:text-accent mt-1 flex items-center underline"
+            className="text-mono-xs text-accent group mt-3 flex items-center gap-2"
             to={cta.link}
           >
             {cta.text}
-            <OpenLink12Icon className="ml-1" />
+            <DirectionRightIcon className="translate-x-0 transition-transform group-hover:translate-x-0.5" />
           </Link>
         )}
+
+        {append}
       </div>
     </div>
   )