fix(frontend): refine streamed presentation and resolve stream edge cases

frontend/src/components/AppHeader.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
   mode: AppMode | null
   healthFailed: boolean
 }>()
-const emit = defineEmits<{ logout: []; toggleDev: [opener: HTMLElement] }>()
+const emit = defineEmits<{ logout: []; reset: []; toggleDev: [opener: HTMLElement] }>()
 
 function openDevPanel(event: MouseEvent): void {
   if (event.currentTarget instanceof HTMLElement) {
@@ -29,11 +29,18 @@ const modeLabel = computed(() => {
   <header class="header">
     <div class="inner">
       <div class="brand">
-        <span class="wordmark"
-          >{{ messages.appHeaderBrandPrefix
-          }}<span class="accent">{{ messages.appHeaderBrandAccent }}</span
-          >{{ messages.appHeaderBrandSuffix }}</span
+        <button
+          class="brand-control"
+          type="button"
+          :aria-label="messages.appHeaderBrandResetLabel"
+          @click="$emit('reset')"
         >
+          <span class="wordmark"
+            >{{ messages.appHeaderBrandPrefix
+            }}<span class="accent">{{ messages.appHeaderBrandAccent }}</span
+            >{{ messages.appHeaderBrandSuffix }}</span
+          >
+        </button>
         <span class="kicker">{{ messages.appHeaderKicker }}</span>
       </div>
       <div class="controls">
@@ -78,6 +85,20 @@ const modeLabel = computed(() => {
   min-width: 0;
 }
 
+.brand-control {
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--r-sm);
+}
+
+.brand-control:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 4px;
+}
+
 .wordmark {
   font-family: var(--f-display);
   font-size: var(--t-brand);