feat: offer a demo instance link from the live deployment

frontend/src/components/AppHeader.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   auth: AuthState
   mode: AppMode | null
   healthFailed: boolean
+  demoUrl: string | null
 }>()
 const emit = defineEmits<{ logout: []; reset: []; toggleDev: [opener: HTMLElement] }>()
 
@@ -47,6 +48,9 @@ const modeLabel = computed(() => {
         <span class="mode" :class="{ failed: healthFailed }">
           {{ modeLabel }}
         </span>
+        <a v-if="demoUrl" class="demo-link" :href="demoUrl">
+          {{ messages.appHeaderDemoInstance }}
+        </a>
         <AuthStatus :auth="auth" @logout="$emit('logout')" />
         <button class="button" type="button" data-dev-panel-opener @click="openDevPanel">
           <span class="full-label">
@@ -141,6 +145,18 @@ const modeLabel = computed(() => {
   color: var(--c-error);
 }
 
+.demo-link {
+  color: var(--c-text-chip);
+  text-transform: uppercase;
+  text-decoration: none;
+  border-bottom: 1px solid var(--c-line-strong);
+}
+
+.demo-link:hover {
+  color: var(--c-text);
+  border-color: var(--c-accent);
+}
+
 .button {
   min-height: 31px;
   padding: 6px 11px;