diff --git a/ui/src/__tests__/bug-report-dialog.test.js b/ui/src/__tests__/bug-report-dialog.test.js
new file mode 100644
index 0000000..1b305ed
--- /dev/null
+++ b/ui/src/__tests__/bug-report-dialog.test.js
@@ -0,0 +1,121 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
+import { useAuthStore, useAppStore, useI18nStore } from '@ligoj/host'
+import BugReportDialog from '../components/BugReportDialog.vue'
+import enMessages from '../i18n/en.js'
+
+// Moved from the host (#121): the dialog now self-binds to app.bugDialogOpen
+// instead of a modelValue prop, and its bugReport.* labels live in plugin-ui's
+// i18n bundle (merged into the shared store here so `t()` resolves to English).
+// Vuetify is externalized in the plugin build, so we stub v-dialog (render its
+// slot inline) and v-icon rather than installing the real plugin.
+const stubs = {
+  'v-dialog': { template: '<div class="v-dialog"><slot /></div>' },
+  'v-icon': { template: '<i class="v-icon"><slot /></i>' },
+}
+
+let wrapper
+
+async function openDialog() {
+  useAppStore().openBugDialog()
+  wrapper = mount(BugReportDialog, { global: { stubs } })
+  await nextTick()
+  await nextTick()
+  return wrapper
+}
+
+const template = () => wrapper.find('.bug-template').element.value
+
+function seedSession(applicationSettings) {
+  const auth = useAuthStore()
+  auth.session = {
+    userName: 'tester',
+    roles: ['USER'],
+    uiAuthorizations: ['.*'],
+    apiAuthorizations: [],
+    applicationSettings: applicationSettings ?? {
+      buildVersion: '4.0.2-test',
+      plugins: ['service:id:ldap', 'service:prov:aws'],
+    },
+  }
+}
+
+describe('<BugReportDialog>', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useI18nStore().merge(enMessages, 'en')
+    window.location.hash = '#/about'
+  })
+
+  it('builds a template containing the version, the URL and the plugins', async () => {
+    seedSession()
+    await openDialog()
+
+    const text = template()
+    expect(text).toContain('4.0.2-test')
+    expect(text).toContain('#/about')
+    expect(text).toContain('service:id:ldap')
+    expect(text).toContain('service:prov:aws')
+    expect(text).toContain('## Description')
+    expect(text).toContain('## Context')
+  })
+
+  it('uses the path when there is no hash, and never leaks a domain', async () => {
+    seedSession()
+    window.location.hash = ''
+    await openDialog()
+
+    const text = template()
+    // jsdom default pathname is "/"; no protocol/host should appear.
+    expect(text).not.toContain('http')
+    expect(text).not.toContain('localhost')
+  })
+
+  it('copies the template to the clipboard via the Clipboard API', async () => {
+    seedSession()
+    const writeText = vi.fn().mockResolvedValue()
+    Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
+    await openDialog()
+
+    await wrapper.find('.bug-btn.primary').trigger('click')
+
+    expect(writeText).toHaveBeenCalledTimes(1)
+    const copied = writeText.mock.calls[0][0]
+    expect(copied).toContain('4.0.2-test')
+    expect(copied).toContain('service:id:ldap')
+    delete navigator.clipboard
+  })
+
+  it('falls back gracefully when the Clipboard API is unavailable', async () => {
+    seedSession()
+    delete navigator.clipboard
+    document.execCommand = vi.fn().mockReturnValue(true)
+    await openDialog()
+
+    // Should not throw, and should fall back to execCommand('copy').
+    await wrapper.find('.bug-btn.primary').trigger('click')
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+  })
+
+  it('links to the Ligoj GitHub issue form in a new tab', async () => {
+    seedSession()
+    await openDialog()
+
+    const link = wrapper.find('.bug-foot a.bug-btn')
+    expect(link.attributes('href')).toContain('https://github.com/ligoj/ligoj/issues/new')
+    expect(link.attributes('target')).toBe('_blank')
+    expect(link.attributes('rel')).toContain('noopener')
+  })
+
+  it('shows a no-plugin placeholder when none are installed', async () => {
+    seedSession({ buildVersion: '1.0', plugins: [] })
+    await openDialog()
+
+    const text = template()
+    expect(text).toContain('1.0')
+    expect(text).toContain('Installed plugins')
+    expect(text).toContain('(none)')
+  })
+})
diff --git a/ui/src/assets/brand.png b/ui/src/assets/brand.png
new file mode 100644
index 0000000..a476a95
Binary files /dev/null and b/ui/src/assets/brand.png differ
diff --git a/ui/src/components/AgreementDialog.vue b/ui/src/components/AgreementDialog.vue
new file mode 100644
index 0000000..8d4240e
--- /dev/null
+++ b/ui/src/components/AgreementDialog.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-dialog :model-value="modelValue" max-width="500" @update:model-value="$emit('update:modelValue', $event)">
+    <v-card>
+      <v-card-title>{{ t('agreement.title') }}</v-card-title>
+      <v-card-text>
+        <p class="mb-4">{{ t('agreement.text') }}</p>
+        <v-checkbox v-model="agreed" :label="t('agreement.checkbox')" hide-details />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="$emit('update:modelValue', false)">{{ t('common.cancel') }}</v-btn>
+        <v-btn color="primary" variant="elevated" :disabled="!agreed" :loading="loading" @click="accept">
+          {{ t('agreement.accept') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useI18nStore } from '@ligoj/host'
+
+defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'agreed'])
+
+const i18n = useI18nStore()
+const t = i18n.t
+const agreed = ref(false)
+
+function accept() {
+  emit('agreed')
+}
+</script>
diff --git a/ui/src/components/BugReportDialog.vue b/ui/src/components/BugReportDialog.vue
new file mode 100644
index 0000000..e4fbecc
--- /dev/null
+++ b/ui/src/components/BugReportDialog.vue
@@ -0,0 +1,228 @@
+<!--
+  BugReportDialog — front-only "report a bug" helper. Builds a copy/paste
+  Markdown template pre-filled with the build version, the current in-app URL
+  (path only, no domain) and the installed plugins (all read from the session
+  via auth.appSettings — no backend call), then links to the GitHub issue form.
+
+  Chrome mirrors AboutView's License dialog (.lic look): the root re-declares
+  its design tokens locally because v-dialog teleports the card to <body>,
+  where scoped page vars don't reach.
+
+  Moved from the host to plugin-ui (#121): mounted once persistently via
+  registerHeaderItem, it self-binds to the shared app.bugDialogOpen flag so the
+  host footer, the Information build card and AboutView all just flip the flag.
+-->
+<template>
+  <v-dialog v-model="open" max-width="680" scrollable>
+    <div class="bug" :style="{ '--c': '#e0567a' }">
+      <header class="bug-head">
+        <span class="bug-orb"><v-icon size="20">mdi-bug-outline</v-icon></span>
+        <div class="bug-htxt">
+          <h3>{{ t('bugReport.title') }}</h3>
+          <p>{{ t('bugReport.hint') }}</p>
+        </div>
+        <button class="bug-x" :aria-label="t('common.close')" @click="close">
+          <v-icon size="20">mdi-close</v-icon>
+        </button>
+      </header>
+
+      <div class="bug-body">
+        <textarea ref="taRef" class="bug-template" readonly :value="template" @focus="selectAll" />
+      </div>
+
+      <footer class="bug-foot">
+        <a class="bug-btn" :href="issueUrl" target="_blank" rel="noopener noreferrer">
+          <v-icon size="16">mdi-github</v-icon>{{ t('bugReport.openIssue') }}
+          <v-icon size="14" class="bug-go">mdi-open-in-new</v-icon>
+        </a>
+        <span class="bug-sp" />
+        <button class="bug-btn primary" @click="copy">
+          <v-icon size="16">{{ copied ? 'mdi-check' : 'mdi-content-copy' }}</v-icon>
+          {{ copied ? t('bugReport.copied') : t('bugReport.copy') }}
+        </button>
+      </footer>
+    </div>
+  </v-dialog>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useAppStore, useAuthStore, useI18nStore } from '@ligoj/host'
+
+const app = useAppStore()
+const auth = useAuthStore()
+const { t } = useI18nStore()
+
+// Self-bound to the shared flag (no props): the dialog is mounted once and any
+// trigger just sets app.bugDialogOpen.
+const open = computed({
+  get: () => app.bugDialogOpen,
+  set: (v) => { if (!v) app.closeBugDialog() },
+})
+
+const GITHUB_ISSUE_URL = 'https://github.com/ligoj/ligoj/issues/new'
+
+const version = computed(() => auth.appSettings?.buildVersion || t('bugReport.unknown'))
+
+// The in-app location WITHOUT the domain: prefer the hash route (this is a
+// hash-router SPA, e.g. "#/about"), else the pathname. Captured into a ref on
+// open so it reflects where the user actually was when they hit the button.
+const url = ref('')
+function captureUrl() {
+  if (typeof window === 'undefined') { url.value = ''; return }
+  url.value = window.location.hash || window.location.pathname || '/'
+}
+
+// appSettings.plugins is a list of backend keys (strings like
+// "service:id:ldap"). Stay robust to an object shape too (id/key/name), since
+// the exact form is backend-driven — fall back to JSON for anything exotic.
+const pluginLines = computed(() => {
+  const list = auth.appSettings?.plugins
+  if (!Array.isArray(list) || !list.length) return []
+  return list.map((p) => {
+    if (typeof p === 'string') return p
+    if (p && typeof p === 'object') return p.id || p.key || p.name || p.artifact || JSON.stringify(p)
+    return String(p)
+  })
+})
+
+const template = computed(() => {
+  const lines = [
+    `## ${t('bugReport.tplDescription')}`,
+    t('bugReport.tplDescPlaceholder'),
+    '',
+    `## ${t('bugReport.tplContext')}`,
+    `- ${t('bugReport.tplVersion')}: ${version.value}`,
+    `- ${t('bugReport.tplUrl')}: ${url.value}`,
+    `- ${t('bugReport.tplPlugins')}:`,
+  ]
+  const plugins = pluginLines.value
+  if (plugins.length) lines.push(...plugins.map((p) => `  - ${p}`))
+  else lines.push(`  - ${t('bugReport.tplNoPlugin')}`)
+  return lines.join('\n')
+})
+
+// Pre-fill the GitHub issue body so the user can submit directly; they can
+// still copy/paste from the textarea if they prefer.
+const issueUrl = computed(() => `${GITHUB_ISSUE_URL}?body=${encodeURIComponent(template.value)}`)
+
+const taRef = ref(null)
+const copied = ref(false)
+let copiedT
+
+function selectAll() {
+  taRef.value?.select?.()
+}
+
+async function copy() {
+  const text = template.value
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      throw new Error('clipboard API unavailable')
+    }
+  } catch {
+    // Fallback: select the textarea and let the legacy execCommand copy it,
+    // leaving the selection visible so the user can Ctrl/Cmd+C manually if
+    // even that is blocked.
+    const ta = taRef.value
+    if (ta) {
+      ta.focus()
+      ta.select()
+      try { document.execCommand('copy') } catch { /* user can copy manually */ }
+    }
+  }
+  copied.value = true
+  clearTimeout(copiedT)
+  copiedT = setTimeout(() => { copied.value = false }, 2000)
+}
+
+function close() { app.closeBugDialog() }
+
+// Refresh the captured URL each time the dialog opens.
+watch(open, (isOpen) => {
+  if (isOpen) {
+    captureUrl()
+    copied.value = false
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.bug {
+  --surface: rgb(var(--v-theme-surface));
+  --card: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --font: var(--lj-font, var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif));
+  --mono: var(--lj-mono, var(--v26-mono, "JetBrains Mono", ui-monospace, monospace));
+  --radius: var(--lj-radius, 18px);
+  --radius-sm: var(--lj-radius-sm, 12px);
+  --shadow-lg: var(--lj-shadow-lg, 0 32px 64px -24px color-mix(in srgb, var(--c) 45%, transparent));
+  --border-w: var(--lj-border-width, 1px);
+  --border-c: var(--lj-border-color, var(--border));
+  --bold: var(--lj-weight-bold, 800);
+  color: var(--ink);
+  display: flex;
+  flex-direction: column;
+  max-height: 82vh;
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+  border-radius: var(--radius);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, var(--card)), var(--card));
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+
+.bug-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
+.bug-orb { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c) 65%, transparent); }
+.bug-htxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.bug-htxt h3 { font-family: var(--font); font-weight: var(--bold); font-size: 17px; margin: 0; letter-spacing: -.02em; }
+.bug-htxt p { margin: 1px 0 0; font-size: 12px; color: var(--ink-3); font-weight: 600; }
+.bug-x { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: var(--lj-radius-sm, 10px); background: transparent; color: var(--ink-3); cursor: pointer; transition: background .14s, color .14s; }
+.bug-x:hover { background: var(--hover); color: var(--ink); }
+
+.bug-body { padding: 16px 18px; overflow-y: auto; }
+.bug-template {
+  width: 100%;
+  min-height: 220px;
+  resize: vertical;
+  box-sizing: border-box;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--ink);
+  background: rgba(var(--v-theme-on-surface), .04);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  white-space: pre;
+  overflow: auto;
+}
+.bug-template:focus { outline: 2px solid color-mix(in srgb, var(--c) 55%, transparent); outline-offset: 1px; }
+
+.bug-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
+.bug-sp { flex: 1; }
+.bug-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--font);
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--ink);
+  text-decoration: none;
+  padding: 8px 16px;
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+  border-radius: var(--lj-radius-sm, 10px);
+  background: transparent;
+  cursor: pointer;
+  transition: background .14s, border-color .14s;
+}
+.bug-btn:hover { background: var(--hover); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
+.bug-btn.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); }
+.bug-btn.primary:hover { filter: brightness(1.05); }
+.bug-go { opacity: .7; }
+</style>
diff --git a/ui/src/components/LoginPromptDialog.vue b/ui/src/components/LoginPromptDialog.vue
new file mode 100644
index 0000000..fdb28eb
--- /dev/null
+++ b/ui/src/components/LoginPromptDialog.vue
@@ -0,0 +1,149 @@
+<!--
+  LoginPromptDialog — 2026 "Vibrant" in-place re-authentication. The host's
+  error store flips auth.authPromptOpen on a 401 + body {redirect:"local"}
+  (session expired mid-use); without this dialog mounted the standalone shell
+  just showed a pinned 401 toast and a dead page. This binds to that flag and
+  lets the user re-login without losing their place (same POST {base}login flow
+  as the Vibrant LoginView), then clears the error queue and reloads. Cancel
+  drops to the Vibrant /login. persistent: the only exits are success or Cancel.
+
+  Moved from the host to plugin-ui (#121): mounted persistently via
+  registerHeaderItem, it self-binds to the shared auth.authPromptOpen flag.
+-->
+<template>
+  <v-dialog v-model="open" max-width="440" persistent>
+    <v-card class="vmodal">
+      <div class="vmodal-head">
+        <span class="mi"><v-icon color="#fff">mdi-lock-reset</v-icon></span>
+        <h3>{{ t('error.401') || 'Session expirée' }}</h3>
+      </div>
+      <v-card-text class="vmodal-body">
+        <p class="lp-intro">{{ t('error.401-details') || 'Votre session a expiré. Reconnectez-vous pour continuer.' }}</p>
+        <v-form ref="formRef" @submit.prevent="submit">
+          <v-text-field v-model="username" prepend-inner-icon="mdi-account-outline" :label="t('login.username') || 'Identifiant'" :disabled="loading" autocomplete="username" :rules="[rules.required]" variant="outlined" class="mb-2" autofocus />
+          <v-text-field v-model="password" prepend-inner-icon="mdi-lock-outline" :label="t('login.password') || 'Mot de passe'" :type="showPwd ? 'text' : 'password'" :disabled="loading" autocomplete="current-password" :rules="[rules.required]"
+            :append-inner-icon="showPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'" variant="outlined" @click:append-inner="showPwd = !showPwd" @keyup.enter="submit" />
+        </v-form>
+      </v-card-text>
+      <div class="vmodal-foot">
+        <button class="mbtn ghost" :disabled="loading" @click="cancel">{{ t('common.cancel') || 'Annuler' }}</button>
+        <span class="foot-sp" />
+        <button class="mbtn primary" :disabled="loading" @click="submit">
+          <span v-if="loading" class="mspin" aria-hidden="true" /><v-icon v-else size="18">mdi-login-variant</v-icon>{{ t('login.submit') || 'Se reconnecter' }}
+        </button>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore, useErrorStore, useI18nStore, APP_BASE } from '@ligoj/host'
+
+const auth = useAuthStore()
+const errorStore = useErrorStore()
+const i18n = useI18nStore()
+const t = i18n.t
+const router = useRouter()
+
+const open = computed({
+  get: () => auth.authPromptOpen,
+  set: (v) => { if (!v) auth.closeAuthPrompt() },
+})
+
+const formRef = ref(null)
+const username = ref('')
+const password = ref('')
+const showPwd = ref(false)
+const loading = ref(false)
+const rules = { required: (v) => !!v || (t('common.required') || 'Requis') }
+
+watch(open, (v) => {
+  if (v) { username.value = ''; password.value = ''; showPwd.value = false; formRef.value?.resetValidation?.() }
+})
+
+async function submit() {
+  const { valid } = formRef.value ? await formRef.value.validate() : { valid: true }
+  if (!valid) return
+  loading.value = true
+  // Same wiring as the Vibrant LoginView/core: form-urlencoded + Accept JSON so
+  // Spring Security answers {success:true|false} instead of a 302.
+  const params = new URLSearchParams()
+  params.append('username', username.value.toLowerCase())
+  params.append('password', password.value)
+  let resp
+  try {
+    resp = await fetch(`${APP_BASE}login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded', Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+      body: params,
+      credentials: 'include',
+    })
+  } catch {
+    errorStore.push({ message: t('login.networkError') || 'Erreur réseau', status: 0 })
+    loading.value = false
+    return
+  }
+  let data = null
+  try { data = await resp.json() } catch { /* non-JSON → failure */ }
+  if (!resp.ok || data?.success !== true) {
+    errorStore.push({ title: t('login.error') || 'Échec', message: t('login.failed') || 'Identifiants invalides', status: resp.status })
+    password.value = ''
+    loading.value = false
+    return
+  }
+  errorStore.clear()
+  errorStore.success(t('login.submit') || 'Reconnecté')
+  auth.closeAuthPrompt()
+  loading.value = false
+  setTimeout(() => { window.location.reload() }, 300)
+}
+
+// Bail-out: session is gone and the user declined to re-auth here → land on the
+// Vibrant login (we don't call auth.logout(), which top-level-navigates out of
+// the SPA — mirrors App.vue's in-app logout intent).
+function cancel() {
+  auth.closeAuthPrompt()
+  router.push({ path: '/login', query: { logout: null } })
+}
+</script>
+
+<style scoped>
+.vmodal {
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--lj-font, var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif));
+  /* Shape/type from the active style's design tokens (assets/vuetify-overrides.css)
+   * so this hand-rolled dialog re-shapes with the theme, not just recolors.
+   * Fallbacks keep the original look when no style attribute is set. */
+  --radius: var(--lj-radius, 20px);
+  --radius-sm: var(--lj-radius-sm, 12px);
+  --shadow-lg: var(--lj-shadow-lg, 0 30px 80px -30px rgba(0, 0, 0, .55));
+  --border-w: var(--lj-border-width, 1px);
+  --bold: var(--lj-weight-bold, 800);
+  border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important;
+}
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 6px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--font); font-weight: var(--bold); font-size: 20px; margin: 0; flex: 1; color: var(--ink); letter-spacing: -.02em; }
+.vmodal-body { padding: 10px 24px 4px !important; }
+.lp-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; line-height: 1.5; }
+.vmodal :deep(.v-field) { border-radius: var(--radius-sm); font-family: var(--font); }
+.vmodal :deep(.v-field__prepend-inner .v-icon) { opacity: .55; }
+.vmodal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px 22px; }
+.foot-sp { flex: 1; }
+.mbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 10px 17px; border-radius: var(--radius-sm); cursor: pointer; border: var(--border-w) var(--lj-border-style, solid) transparent; transition: filter .15s, background .15s, border-color .15s; }
+.mbtn.primary { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.mbtn.primary:hover:not(:disabled) { filter: brightness(1.04); }
+.mbtn.ghost { color: var(--ink-2); background: transparent; border-color: var(--border); }
+.mbtn.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--border-2); }
+.mbtn:disabled { opacity: .6; cursor: default; }
+.mspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: sspin .7s linear infinite; }
+@keyframes sspin { to { transform: rotate(360deg); } }
+</style>
diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index 26d55d2..f8caa35 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -78,6 +78,46 @@ export default {
   'system.info.buildVersion': 'Version',
   'system.info.reportBug': 'Report a bug',
 
+  // About / bug report / agreement — moved from the host shell (#121)
+  'about.title': 'About {name}',
+  'about.subtitle': 'Version, stack and project links',
+  'about.app': 'Application',
+  'about.version': 'Version',
+  'about.buildDate': 'Build Date',
+  'about.buildNumber': 'Build Number',
+  'about.project': 'Project',
+  'about.github': 'GitHub repository',
+  'about.license': 'License',
+  'about.builtBy': 'Built and maintained by',
+  'about.frontend': 'Frontend',
+  'about.framework': 'Framework',
+  'about.buildTool': 'Build Tool',
+  'about.state': 'State',
+  'about.resources': 'Resources',
+  'about.api': 'REST API',
+  'about.apiHint': 'Endpoints, examples, and live SwaggerUI',
+  'about.apiTokens': 'API tokens',
+  'about.apiTokensHint': 'Create or revoke keys for the REST API',
+  'about.reportBug': 'Report a bug',
+  'about.reportBugHint': 'Pre-filled template + GitHub issue form',
+  'bugReport.title': 'Report a bug',
+  'bugReport.hint': 'Copy the template below into a new GitHub issue.',
+  'bugReport.copy': 'Copy',
+  'bugReport.copied': 'Copied!',
+  'bugReport.openIssue': 'Open a GitHub issue',
+  'bugReport.unknown': 'unknown',
+  'bugReport.tplDescription': 'Description',
+  'bugReport.tplDescPlaceholder': '(describe the problem here)',
+  'bugReport.tplContext': 'Context',
+  'bugReport.tplVersion': 'Version',
+  'bugReport.tplUrl': 'URL',
+  'bugReport.tplPlugins': 'Installed plugins',
+  'bugReport.tplNoPlugin': '(none)',
+  'agreement.title': 'Security Agreement',
+  'agreement.text': 'You are about to perform a sensitive operation. Please read and accept the security agreement before continuing.',
+  'agreement.checkbox': 'I have read and accept the security agreement',
+  'agreement.accept': 'Accept & Continue',
+
   // System → Configuration
   'system.config.title': 'Configuration',
   'system.config.encryptHelper': 'Encrypt helper',
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index 64563ea..691f17f 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -77,6 +77,46 @@ export default {
   'system.info.buildVersion': 'Version',
   'system.info.reportBug': 'Signaler un bug',
 
+  // À propos / signalement de bug / accord — déplacés depuis le host (#121)
+  'about.title': 'À propos de {name}',
+  'about.subtitle': 'Version, stack technique et liens du projet',
+  'about.app': 'Application',
+  'about.version': 'Version',
+  'about.buildDate': 'Date de build',
+  'about.buildNumber': 'Numéro de build',
+  'about.project': 'Projet',
+  'about.github': 'Dépôt GitHub',
+  'about.license': 'Licence',
+  'about.builtBy': 'Conçu et maintenu par',
+  'about.frontend': 'Frontend',
+  'about.framework': 'Framework',
+  'about.buildTool': 'Outil de build',
+  'about.state': 'État',
+  'about.resources': 'Ressources',
+  'about.api': 'API REST',
+  'about.apiHint': 'Points d\'accès, exemples et SwaggerUI en direct',
+  'about.apiTokens': 'Jetons API',
+  'about.apiTokensHint': 'Créer ou révoquer des clés pour l\'API REST',
+  'about.reportBug': 'Signaler un bug',
+  'about.reportBugHint': 'Modèle pré-rempli + formulaire d\'issue GitHub',
+  'bugReport.title': 'Signaler un bug',
+  'bugReport.hint': 'Copiez le modèle ci-dessous dans une nouvelle issue GitHub.',
+  'bugReport.copy': 'Copier',
+  'bugReport.copied': 'Copié !',
+  'bugReport.openIssue': 'Ouvrir une issue GitHub',
+  'bugReport.unknown': 'inconnue',
+  'bugReport.tplDescription': 'Description',
+  'bugReport.tplDescPlaceholder': '(décrivez le problème ici)',
+  'bugReport.tplContext': 'Contexte',
+  'bugReport.tplVersion': 'Version',
+  'bugReport.tplUrl': 'URL',
+  'bugReport.tplPlugins': 'Plugins installés',
+  'bugReport.tplNoPlugin': '(aucun)',
+  'agreement.title': 'Accord de sécurité',
+  'agreement.text': 'Vous êtes sur le point d\'effectuer une opération sensible. Veuillez lire et accepter l\'accord de sécurité avant de continuer.',
+  'agreement.checkbox': 'J\'ai lu et j\'accepte l\'accord de sécurité',
+  'agreement.accept': 'Accepter et continuer',
+
   // Système → Configuration
   'system.config.title': 'Configuration',
   'system.config.encryptHelper': 'Outil de chiffrement',
diff --git a/ui/src/index.js b/ui/src/index.js
index 7fdbab7..23849db 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -44,14 +44,20 @@ if (typeof document !== 'undefined') {
  * Shared host surface is imported from `@ligoj/host` (kept external so the
  * plugin and host share the same pinia / reactive instances).
  */
-import { useI18nStore } from '@ligoj/host'
+import { useI18nStore, useAppStore } from '@ligoj/host'
 import UiPlugin from './UiPlugin.vue'
 import service from './service.js'
 
 import enMessages from './i18n/en.js'
 import frMessages from './i18n/fr.js'
 
+// Dialogs moved from the host (#121): the route-less ones are mounted
+// persistently via registerHeaderItem and self-bind to their store flags.
+import BugReportDialog from './components/BugReportDialog.vue'
+import LoginPromptDialog from './components/LoginPromptDialog.vue'
+
 import HomeView from './views/HomeView.vue'
+import AboutView from './views/AboutView.vue'
 import ProjectListView from './views/ProjectListView.vue'
 import ProjectDetailView from './views/ProjectDetailView.vue'
 import ManualView from './views/ManualView.vue'
@@ -83,6 +89,8 @@ const features = {
 // still resolve to the same component.
 const routes = [
   { path: '/', name: 'ui-home', component: HomeView, alias: ['/home'] },
+  // About page — moved here from the host shell (#121).
+  { path: '/about', name: 'about', component: AboutView },
   { path: '/home/manual', name: 'ui-manual', component: ManualView },
   { path: '/project', name: 'ui-project-list', component: ProjectListView, alias: ['/home/project'] },
   { path: '/project/:id', name: 'ui-project-detail', component: ProjectDetailView, alias: ['/home/project/:id'] },
@@ -130,6 +138,14 @@ export default {
     for (const route of routes) {
       router.addRoute(route)
     }
+    // Mount the global, route-less dialogs persistently in the host shell.
+    // They are v-dialogs (teleported to <body>) that self-bind to their store
+    // flags — app.bugDialogOpen (footer / build card / About) and
+    // auth.authPromptOpen (401 re-auth) — so 'ui' being always loaded
+    // (REQUIRED_PLUGINS) keeps them available app-wide.
+    const app = useAppStore()
+    app.registerHeaderItem(BugReportDialog)
+    app.registerHeaderItem(LoginPromptDialog)
   },
   feature(action, ...args) {
     const fn = features[action]
diff --git a/ui/src/views/AboutView.vue b/ui/src/views/AboutView.vue
new file mode 100644
index 0000000..65f9bde
--- /dev/null
+++ b/ui/src/views/AboutView.vue
@@ -0,0 +1,242 @@
+<!--
+  AboutView — 2026 "Vibrant" about page (/about). Ports the core AboutView
+  content (app build info from auth.appSettings, frontend stack, project links,
+  resources) into the Vibrant card grid. Reached from the sidebar footer.
+
+  Moved from the host to plugin-ui (#121): the route is registered by the
+  plugin's install(); the "report a bug" row opens the shared, persistently
+  mounted BugReportDialog through the app.bugDialogOpen flag.
+-->
+<template>
+  <div class="about lj-surface">
+    <LjPageHeader
+      :title="t('about.title', { name: appName })"
+      :subtitle="t('about.subtitle')"
+      :crumbs="[{ icon: 'mdi-information-outline', label: t('about.title', { name: appName }), current: true }]"
+    />
+
+    <div class="grid">
+      <section class="card" :style="{ '--c': '#8b5cf6' }">
+        <div class="card-head"><span class="ch-ic"><v-icon size="20">mdi-source-branch</v-icon></span><h3>{{ t('about.project') }}</h3></div>
+        <div class="card-body">
+          <a class="lrow" href="https://github.com/ligoj/ligoj" target="_blank" rel="noopener noreferrer">
+            <v-icon size="20" class="lr-ic">mdi-github</v-icon>
+            <span class="lr-txt"><span class="lr-title">{{ t('about.github') }}</span><span class="lr-sub">github.com/ligoj/ligoj</span></span>
+            <v-icon size="16" class="lr-go">mdi-open-in-new</v-icon>
+          </a>
+          <a class="lrow" @click="licenseDialog = true">
+            <v-icon size="20" class="lr-ic">mdi-license</v-icon>
+            <span class="lr-txt"><span class="lr-title">{{ t('about.license') }}</span><span class="lr-sub">MIT</span></span>
+            <v-icon size="16" class="lr-go">mdi-chevron-right</v-icon>
+          </a>
+          <a class="lrow" @click="app.openBugDialog()">
+            <v-icon size="20" class="lr-ic">mdi-bug-outline</v-icon>
+            <span class="lr-txt"><span class="lr-title">{{ t('about.reportBug') }}</span><span class="lr-sub">{{ t('about.reportBugHint') }}</span></span>
+            <v-icon size="16" class="lr-go">mdi-chevron-right</v-icon>
+          </a>
+          <a class="lrow" href="https://www.kloudy.fr/" target="_blank" rel="noopener noreferrer">
+            <v-icon size="20" class="lr-ic">mdi-hammer-wrench</v-icon>
+            <span class="lr-txt">
+              <span class="lr-title">{{ t('about.builtBy') }}</span>
+              <span class="lr-sub d-flex align-center ga-2">
+                <span class="kloudy-name">Kloudy</span>
+                <img :src="brandColor" alt="Kloudy" class="kloudy-logo" />
+              </span>
+            </span>
+            <v-icon size="16" class="lr-go">mdi-open-in-new</v-icon>
+          </a>
+        </div>
+      </section>
+
+      <section class="card" :style="{ '--c': '#d9701a' }">
+        <div class="card-head"><span class="ch-ic"><v-icon size="20">mdi-bookshelf</v-icon></span><h3>{{ t('about.resources') }}</h3></div>
+        <div class="card-body">
+          <a class="lrow" @click="go('/api')">
+            <v-icon size="20" class="lr-ic">mdi-api</v-icon>
+            <span class="lr-txt"><span class="lr-title">{{ t('about.api') }}</span><span class="lr-sub">{{ t('about.apiHint') }}</span></span>
+            <v-icon size="16" class="lr-go">mdi-chevron-right</v-icon>
+          </a>
+          <a class="lrow" @click="go('/api/token')">
+            <v-icon size="20" class="lr-ic">mdi-key</v-icon>
+            <span class="lr-txt"><span class="lr-title">{{ t('about.apiTokens') }}</span><span class="lr-sub">{{ t('about.apiTokensHint') }}</span></span>
+            <v-icon size="16" class="lr-go">mdi-chevron-right</v-icon>
+          </a>
+          <a class="lrow" @click="go('/system/information')">
+            <v-icon size="20" class="lr-ic">mdi-server-outline</v-icon>
+            <span class="lr-txt"><span class="lr-title">{{ t('system.info.title') }}</span><span class="lr-sub">{{ t('system.info.subtitle') }}</span></span>
+            <v-icon size="16" class="lr-go">mdi-chevron-right</v-icon>
+          </a>
+        </div>
+      </section>
+    </div>
+
+    <v-dialog v-model="licenseDialog" max-width="680" scrollable>
+      <div class="lic" :style="{ '--c': '#8b5cf6' }">
+        <header class="lic-head">
+          <span class="lic-orb"><v-icon size="20">mdi-license</v-icon></span>
+          <div class="lic-htxt">
+            <h3>{{ t('about.license') }} — MIT</h3>
+            <p>Ligoj</p>
+          </div>
+          <button class="lic-x" :aria-label="t('common.close')" @click="licenseDialog = false">
+            <v-icon size="20">mdi-close</v-icon>
+          </button>
+        </header>
+        <div class="lic-body"><pre class="ligoj-license">{{ licenseText }}</pre></div>
+        <footer class="lic-foot">
+          <button class="lic-btn" @click="licenseDialog = false">{{ t('common.close') }}</button>
+        </footer>
+      </div>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore, useAuthStore, useI18nStore, LjPageHeader } from '@ligoj/host'
+import brandColor from '../assets/brand.png'
+
+const router = useRouter()
+const app = useAppStore()
+const auth = useAuthStore()
+const i18n = useI18nStore()
+const t = i18n.t
+
+const appName = computed(() => auth.appSettings?.name || 'Ligoj')
+function go(path) { router.push(path) }
+
+const licenseDialog = ref(false)
+
+// Inlined MIT license text — kept here so the About view does not have
+// to fetch the LICENSE file from the backend (works offline / in dev).
+const LICENSE_TEMPLATE = (name) => `MIT License
+
+Copyright (c) ${name} Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.`
+
+const licenseText = computed(() => LICENSE_TEMPLATE(appName.value))
+
+onMounted(() => app.setBreadcrumbs(() => [{ title: t('nav.home'), to: '/' }, { title: t('about.title', { name: appName.value }), icon: 'mdi-information-outline' }]))
+</script>
+
+<style scoped>
+.about {
+  --surface: rgb(var(--v-theme-surface));
+  --card: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --pill: rgba(var(--v-theme-on-surface), .06);
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--lj-font, var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif));
+  --mono: var(--lj-mono, var(--v26-mono, "JetBrains Mono", ui-monospace, monospace));
+  /* Shape/type from the active style's design tokens (assets/vuetify-overrides.css)
+   * so this hand-rolled view re-shapes with the theme, not just recolors.
+   * Fallbacks keep the original look when no style attribute is set. */
+  --radius: var(--lj-radius, 18px);
+  --radius-sm: var(--lj-radius-sm, 12px);
+  --shadow: var(--lj-shadow, 0 2px 8px rgba(0, 0, 0, .04));
+  --border-w: var(--lj-border-width, 1px);
+  --border-c: var(--lj-border-color, var(--border));
+  --bold: var(--lj-weight-bold, 800);
+  color: var(--ink);
+}
+/* Page header now rendered by the shared <LjPageHeader> (host). */
+
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
+.card { border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, var(--card)), var(--card)); box-shadow: var(--shadow); overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; }
+.card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--c) 55%, transparent); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
+@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
+.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
+.ch-ic { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c) 65%, transparent); }
+.card-head h3 { font-family: var(--font); font-weight: var(--bold); font-size: 17px; margin: 0; letter-spacing: -.02em; }
+.card-body { padding: 2px 18px 16px; }
+
+.frow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+.frow:last-child { border-bottom: 0; }
+.fk { font-size: 13px; font-weight: 600; color: var(--ink-3); flex: none; }
+.fv { font-size: 13.5px; color: var(--ink); margin-left: auto; text-align: right; min-width: 0; overflow: hidden; }
+.fv.mono { font-family: var(--mono); font-size: 12.5px; }
+.vtxt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+
+.lrow { display: flex; align-items: center; gap: 12px; padding: 11px 10px; margin: 0 -10px; border-radius: var(--lj-radius-sm, 11px); cursor: pointer; text-decoration: none; color: inherit; transition: background .14s; }
+.lrow:hover { background: var(--hover); }
+.lrow.static { cursor: default; }
+.lrow.static:hover { background: transparent; }
+.lr-ic { color: var(--ink-2); flex: none; }
+.lr-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.lr-title { font-family: var(--font); font-weight: 700; font-size: 13.5px; color: var(--ink); }
+.lr-sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lr-go { color: var(--ink-3); flex: none; }
+.kloudy-name { font-weight: 800; color: #d9701a; }
+.kloudy-logo {
+  height: 1.1em;
+  width: auto;
+  vertical-align: middle;
+}
+/* License dialog — reskinned to match the Vibrant card language */
+.lic {
+  --surface: rgb(var(--v-theme-surface));
+  --card: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --font: var(--lj-font, var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif));
+  --mono: var(--lj-mono, var(--v26-mono, "JetBrains Mono", ui-monospace, monospace));
+  --radius: var(--lj-radius, 18px);
+  --radius-sm: var(--lj-radius-sm, 12px);
+  --shadow-lg: var(--lj-shadow-lg, 0 32px 64px -24px color-mix(in srgb, var(--c) 45%, transparent));
+  --border-w: var(--lj-border-width, 1px);
+  --border-c: var(--lj-border-color, var(--border));
+  --bold: var(--lj-weight-bold, 800);
+  color: var(--ink);
+  display: flex;
+  flex-direction: column;
+  max-height: 82vh;
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+  border-radius: var(--radius);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, var(--card)), var(--card));
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.lic-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
+.lic-orb { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c) 65%, transparent); }
+.lic-htxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.lic-htxt h3 { font-family: var(--font); font-weight: var(--bold); font-size: 17px; margin: 0; letter-spacing: -.02em; }
+.lic-htxt p { margin: 1px 0 0; font-size: 12px; color: var(--ink-3); font-weight: 600; }
+.lic-x { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: var(--lj-radius-sm, 10px); background: transparent; color: var(--ink-3); cursor: pointer; transition: background .14s, color .14s; }
+.lic-x:hover { background: var(--hover); color: var(--ink); }
+.lic-body { padding: 16px 18px; overflow-y: auto; }
+.lic-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); }
+.lic-btn { font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--ink); padding: 8px 16px; border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--lj-radius-sm, 10px); background: transparent; cursor: pointer; transition: background .14s, border-color .14s; }
+.lic-btn:hover { background: var(--hover); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
+.ligoj-license {
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+}
+</style>
diff --git a/ui/src/views/SystemInfoView.vue b/ui/src/views/SystemInfoView.vue
index 60d31df..8a7b662 100644
--- a/ui/src/views/SystemInfoView.vue
+++ b/ui/src/views/SystemInfoView.vue
@@ -81,21 +81,19 @@
           <div class="frow"><span class="fk"><v-icon size="15">mdi-clock-outline</v-icon>{{ t('system.info.buildTimestamp') }}</span><span class="fv mono">{{ build.timestamp || '—' }}</span></div>
           <div class="frow"><span class="fk"><v-icon size="15">mdi-clock-outline</v-icon>{{ t('system.info.buildDate') }}</span><span class="fv mono">{{ build.date || '—' }}</span></div>
           <div class="frow"><span class="fk"><v-icon size="15">mdi-tag-outline</v-icon>{{ t('system.info.buildVersion') }}</span><span class="fv mono">{{ build.version || '—' }}</span></div>
-          <button class="bug-link" type="button" @click="bugDialog = true">
+          <button class="bug-link" type="button" @click="app.openBugDialog()">
             <v-icon size="16">mdi-bug-outline</v-icon>{{ t('system.info.reportBug') }}
           </button>
         </div>
       </section>
     </div>
-
-    <BugReportDialog v-model="bugDialog" />
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { useApi, useAppStore, useAuthStore, useClipboard, useI18nStore, APP_BASE, LjPageHeader, LjButton, BugReportDialog } from '@ligoj/host'
+import { useApi, useAppStore, useAuthStore, useClipboard, useI18nStore, APP_BASE, LjPageHeader, LjButton } from '@ligoj/host'
 
 const router = useRouter()
 const api = useApi()
@@ -106,7 +104,6 @@ const t = i18n.t
 const { copy } = useClipboard()
 
 const error = ref(null)
-const bugDialog = ref(false)
 const updatingTz = ref(null)
 const cpu = ref('')
 const dateIso = ref('')