fix: stabilize the live recommendation path

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/AppHeader.vue

@@ -48,7 +48,7 @@ const modeLabel = computed(() => {
         <span class="mode" :class="{ failed: healthFailed }">
           {{ modeLabel }}
         </span>
-        <a v-if="demoUrl" class="demo-link" :href="demoUrl">
+        <a v-if="demoUrl" class="button demo-link" :href="demoUrl">
           {{ messages.appHeaderDemoInstance }}
         </a>
         <AuthStatus :auth="auth" @logout="$emit('logout')" />
@@ -146,21 +146,19 @@ const modeLabel = computed(() => {
 }
 
 .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 {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
   min-height: 31px;
   padding: 6px 11px;
   color: var(--c-text-muted);
+  font-family: var(--f-mono);
+  font-size: var(--t-micro);
   cursor: pointer;
   background: transparent;
   border: 1px solid var(--c-line);
@@ -169,6 +167,7 @@ const modeLabel = computed(() => {
 
 .button:hover {
   color: var(--c-text);
+  text-decoration: none;
   border-color: var(--c-focus-border);
 }
 

frontend/src/components/AuthStatus.vue

@@ -36,6 +36,7 @@ const logoutLabel = computed(() => {
       >{{ auth.user.display_name }}
     </span>
     <button
+      v-if="auth.user.can_logout"
       class="button"
       type="button"
       :disabled="auth.status === 'logging_out'"

frontend/src/composables/useApi.ts

@@ -9,10 +9,14 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 function parseCurrentUser(value: unknown): CurrentUser {
-  if (!isRecord(value) || typeof value.display_name !== 'string') {
+  if (
+    !isRecord(value) ||
+    typeof value.display_name !== 'string' ||
+    typeof value.can_logout !== 'boolean'
+  ) {
     throw new Error(messages.useApiInvalidCurrentUser)
   }
-  return { display_name: value.display_name }
+  return { display_name: value.display_name, can_logout: value.can_logout }
 }
 
 function parsePlaylistResponse(value: unknown): { url: string | null } {

frontend/src/lib/types.ts

@@ -76,4 +76,5 @@ export interface PlaylistCreateResponse {
 
 export interface CurrentUser {
   display_name: string
+  can_logout: boolean
 }