From 7a2aab6356eda14099541951f2c6bdbe456e2399 Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 10 Sep 2026 19:56:00 +0200
Subject: [PATCH 1/6] fix(hub-ui): show failed icons and retry on remount

---
 .../client/components/icons/IconifyIcon.vue   | 28 +++++++++++++------
 packages/hub-ui/src/client/utils/iconify.ts   | 16 +++++++----
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
index 7a210ccae..bde0d454d 100644
--- a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
+++ b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
@@ -20,25 +20,35 @@ const iconifyParsed = computed(() => {
 })
 
 const iconifyLoaded = ref<string | undefined>(undefined)
-watchEffect(async () => {
-  if (!iconifyParsed.value) {
-    iconifyLoaded.value = undefined
+const failed = ref(false)
+watchEffect(async (onCleanup) => {
+  let active = true
+  onCleanup(() => {
+    active = false
+  })
+  iconifyLoaded.value = undefined
+  failed.value = false
+  if (!iconifyParsed.value)
     return
-  }
   try {
-    iconifyLoaded.value = await getIconifySvg(iconifyParsed.value.collection, iconifyParsed.value.icon)
+    const svg = await getIconifySvg(iconifyParsed.value.collection, iconifyParsed.value.icon)
+    if (active)
+      iconifyLoaded.value = svg
   }
   catch {
-    // A failed icon fetch (offline / flaky CDN) should degrade to a blank icon,
-    // not throw out of the async effect and crash the surrounding panel.
-    iconifyLoaded.value = undefined
+    if (active)
+      failed.value = true
   }
 })
 </script>
 
 <template>
+  <svg v-if="failed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="w-full h-full">
+    <rect x="3" y="3" width="18" height="18" rx="3" />
+    <path d="M12 7v6m0 3v1" />
+  </svg>
   <div
-    v-if="iconifyParsed"
+    v-else-if="iconifyParsed"
     v-html="iconifyLoaded"
   />
   <img
diff --git a/packages/hub-ui/src/client/utils/iconify.ts b/packages/hub-ui/src/client/utils/iconify.ts
index c7577d778..03460b958 100644
--- a/packages/hub-ui/src/client/utils/iconify.ts
+++ b/packages/hub-ui/src/client/utils/iconify.ts
@@ -24,10 +24,16 @@ export async function getIconifySvg(collection: string, icon: string) {
 
   async function _get() {
     const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=100%`
-    // Bound the request so a stalled connection (offline / flaky CDN / firewall
-    // black-holing the host) rejects instead of hanging forever; the caller
-    // already degrades a rejected fetch to a blank icon.
-    const svg = await fetch(url, { signal: AbortSignal.timeout(10_000) }).then(res => res.text())
-    return purify.sanitize(svg)
+    const response = await fetch(url, { signal: AbortSignal.timeout(10_000) })
+    if (!response.ok)
+      throw new Error(`Iconify request failed: ${response.status}`)
+    const svg = purify.sanitize(await response.text())
+    const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
+    if (document.documentElement.localName !== 'svg'
+      || document.querySelector('parsererror')
+      || !document.querySelector('path, circle, ellipse, rect, line, polyline, polygon, text, use, image')) {
+      throw new Error('Iconify returned an invalid SVG')
+    }
+    return svg
   }
 }

From 2bbdbcc54f80d59ab0172747a825eef018fa668d Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 10 Sep 2026 21:41:52 +0200
Subject: [PATCH 2/6] fix(hub-ui): address icon recovery review feedback

---
 .../hub-ui/src/client/components/icons/IconifyIcon.vue    | 1 +
 packages/hub-ui/src/client/utils/iconify.ts               | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
index bde0d454d..e69a3cf49 100644
--- a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
+++ b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
@@ -49,6 +49,7 @@ watchEffect(async (onCleanup) => {
   </svg>
   <div
     v-else-if="iconifyParsed"
+    aria-hidden="true"
     v-html="iconifyLoaded"
   />
   <img
diff --git a/packages/hub-ui/src/client/utils/iconify.ts b/packages/hub-ui/src/client/utils/iconify.ts
index 03460b958..9221c4989 100644
--- a/packages/hub-ui/src/client/utils/iconify.ts
+++ b/packages/hub-ui/src/client/utils/iconify.ts
@@ -28,10 +28,10 @@ export async function getIconifySvg(collection: string, icon: string) {
     if (!response.ok)
       throw new Error(`Iconify request failed: ${response.status}`)
     const svg = purify.sanitize(await response.text())
-    const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
-    if (document.documentElement.localName !== 'svg'
-      || document.querySelector('parsererror')
-      || !document.querySelector('path, circle, ellipse, rect, line, polyline, polygon, text, use, image')) {
+    const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')
+    if (svgDocument.documentElement.localName !== 'svg'
+      || svgDocument.querySelector('parsererror')
+      || !svgDocument.querySelector('path, circle, ellipse, rect, line, polyline, polygon, text, use, image')) {
       throw new Error('Iconify returned an invalid SVG')
     }
     return svg

From da365296f008cb6219851c1dbd0d79f1ba2c0d3c Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 10 Sep 2026 21:52:15 +0200
Subject: [PATCH 3/6] fix(hub-ui): mark image icons as decorative

---
 packages/hub-ui/src/client/components/icons/IconifyIcon.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
index e69a3cf49..d9b836bd6 100644
--- a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
+++ b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
@@ -54,6 +54,8 @@ watchEffect(async (onCleanup) => {
   />
   <img
     v-else :src="icon"
+    alt=""
+    aria-hidden="true"
     class="w-full h-full m-auto"
     draggable="false"
   >

From 61af2e0412c9dbf777177b75ff2814cd3e46c7d5 Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 10 Sep 2026 21:53:51 +0200
Subject: [PATCH 4/6] docs(hub-ui): retain icon failure handling rationale

---
 packages/hub-ui/src/client/components/icons/IconifyIcon.vue | 1 +
 packages/hub-ui/src/client/utils/iconify.ts                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
index d9b836bd6..41bfc8278 100644
--- a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
+++ b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
@@ -36,6 +36,7 @@ watchEffect(async (onCleanup) => {
       iconifyLoaded.value = svg
   }
   catch {
+    /** Keep fetch failures local to the icon so the surrounding panel remains usable. */
     if (active)
       failed.value = true
   }
diff --git a/packages/hub-ui/src/client/utils/iconify.ts b/packages/hub-ui/src/client/utils/iconify.ts
index 9221c4989..456e3333f 100644
--- a/packages/hub-ui/src/client/utils/iconify.ts
+++ b/packages/hub-ui/src/client/utils/iconify.ts
@@ -24,6 +24,7 @@ export async function getIconifySvg(collection: string, icon: string) {
 
   async function _get() {
     const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=100%`
+    /** Bound stalled requests so the caller can display its failure glyph. */
     const response = await fetch(url, { signal: AbortSignal.timeout(10_000) })
     if (!response.ok)
       throw new Error(`Iconify request failed: ${response.status}`)

From 9ffadff51102ee629e3e65f74c9432aa2a536533 Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 10 Sep 2026 21:57:13 +0200
Subject: [PATCH 5/6] refactor(hub-ui): keep icon recovery focused on request
 failures

---
 packages/hub-ui/src/client/utils/iconify.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/hub-ui/src/client/utils/iconify.ts b/packages/hub-ui/src/client/utils/iconify.ts
index 456e3333f..62fbb10b4 100644
--- a/packages/hub-ui/src/client/utils/iconify.ts
+++ b/packages/hub-ui/src/client/utils/iconify.ts
@@ -28,13 +28,6 @@ export async function getIconifySvg(collection: string, icon: string) {
     const response = await fetch(url, { signal: AbortSignal.timeout(10_000) })
     if (!response.ok)
       throw new Error(`Iconify request failed: ${response.status}`)
-    const svg = purify.sanitize(await response.text())
-    const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')
-    if (svgDocument.documentElement.localName !== 'svg'
-      || svgDocument.querySelector('parsererror')
-      || !svgDocument.querySelector('path, circle, ellipse, rect, line, polyline, polygon, text, use, image')) {
-      throw new Error('Iconify returned an invalid SVG')
-    }
-    return svg
+    return purify.sanitize(await response.text())
   }
 }

From af4f1f8774a00b54f5c4ebe9a74d7fafb8d2b71c Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Fri, 11 Sep 2026 13:24:00 +0200
Subject: [PATCH 6/6] fix(hub-ui): use bundled UnoCSS warning fallback

---
 packages/hub-ui/src/client/components/icons/IconifyIcon.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
index 41bfc8278..157d23dc0 100644
--- a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
+++ b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
@@ -44,10 +44,7 @@ watchEffect(async (onCleanup) => {
 </script>
 
 <template>
-  <svg v-if="failed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="w-full h-full">
-    <rect x="3" y="3" width="18" height="18" rx="3" />
-    <path d="M12 7v6m0 3v1" />
-  </svg>
+  <div v-if="failed" class="i-ph:warning-duotone w-full h-full" aria-hidden="true" />
   <div
     v-else-if="iconifyParsed"
     aria-hidden="true"