From 41602e21c2c81bbb9ebabe14aae47c137f0b57e7 Mon Sep 17 00:00:00 2001
From: userAdityaa <aditya.chaudhary1558@gmail.com>
Date: Mon, 20 Apr 2026 23:26:48 +0545
Subject: [PATCH] feat: display relay provisioning errors in UI

---
 frontend/src/components/RelayDetailCard.tsx |  7 +++++++
 frontend/src/components/RelayListItem.tsx   | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RelayDetailCard.tsx b/frontend/src/components/RelayDetailCard.tsx
index cf9b7d6..360c0f9 100644
--- a/frontend/src/components/RelayDetailCard.tsx
+++ b/frontend/src/components/RelayDetailCard.tsx
@@ -203,6 +203,13 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
         </Show>
       </div>
 
+      <Show when={r().sync_error}>
+        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+          <p class="text-sm font-semibold text-red-800">Provisioning error</p>
+          <p class="mt-1 text-sm text-red-700 font-mono break-all">{r().sync_error}</p>
+        </div>
+      </Show>
+
       <hr class="border-gray-200" />
 
       <DetailSection title="Policy">
diff --git a/frontend/src/components/RelayListItem.tsx b/frontend/src/components/RelayListItem.tsx
index cef2ebe..5edc721 100644
--- a/frontend/src/components/RelayListItem.tsx
+++ b/frontend/src/components/RelayListItem.tsx
@@ -1,4 +1,5 @@
 import { A } from "@solidjs/router"
+import { Show } from "solid-js"
 import type { Relay } from "@/lib/api"
 
 type RelayListItemProps = {
@@ -19,7 +20,17 @@ export default function RelayListItem(props: RelayListItemProps) {
               <p class="text-xs text-gray-500 break-all mt-1">Tenant: {props.relay.tenant}</p>
             )}
           </div>
-          <p class="text-xs uppercase tracking-wide text-gray-500">{props.relay.status}</p>
+          <Show
+            when={props.relay.sync_error}
+            fallback={<p class="text-xs uppercase tracking-wide text-gray-500">{props.relay.status}</p>}
+          >
+            <span
+              class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-0.5 text-xs font-medium text-red-700 max-w-56 truncate"
+              title={props.relay.sync_error}
+            >
+              {props.relay.sync_error}
+            </span>
+          </Show>
         </div>
       </A>
     </li>
-- 
2.52.0