apps/app/src/App.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify'
+import Toast from 'primevue/toast'
+import ConfirmDialog from 'primevue/confirmdialog'
 import ScrollToTop from '@core/components/ScrollToTop.vue'
 import initCore from '@core/initCore'
 import { initConfigStore, useConfigStore } from '@core/stores/config'
@@ -68,5 +70,13 @@ authStore.initialize()
         </VBtn>
       </template>
     </VSnackbar>
+
+    <!--
+      PrimeVue overlay services (F3 — parallel-mode with VSnackbar above
+      and the legacy VDialog confirm patterns until F4 sub-packages
+      migrate call-sites to useToast() and useConfirm()).
+    -->
+    <Toast />
+    <ConfirmDialog />
   </VLocaleProvider>
 </template>

apps/app/src/components/Icon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Generic Iconify renderer — the F4-migration replacement for
+// <VIcon icon="tabler-X" />. Wraps @iconify/vue's <Icon> component so
+// call-sites use the existing Crewli icon naming convention
+// ("tabler-eye", "tabler-user", "tabler-mail-code", …) and get real
+// SVG output without depending on Vuetify's icon adapter.
+//
+// Per RFC AD-5 (corrected in B9): @iconify/vue produces the SVG.
+// UnoCSS-style i-tabler-* utility classes were considered but not
+// adopted — UnoCSS is not in the Crewli stack.
+//
+// Usage:
+//   <Icon name="tabler-eye" />
+//   <Icon name="tabler-user" size="20" />
+//   <Icon name="tabler-shield-lock" class="text-primary-500" />
+
+import { Icon as IconifyIcon } from '@iconify/vue'
+
+interface Props {
+  name: string
+  size?: number | string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: undefined,
+})
+</script>
+
+<template>
+  <IconifyIcon
+    :icon="name"
+    :width="size"
+    :height="size"
+  />
+</template>