From f25b82ddb5ef320b8cff780147e041ded8d47f8a Mon Sep 17 00:00:00 2001
From: ruv <ruv@ruv.net>
Date: Mon, 27 Apr 2026 11:40:37 -0400
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20always-visible=20Tour=20butt?=
 =?UTF-8?q?on=20=E2=80=94=20replay=20welcome=20modal=20any=20time?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 10-step welcome tour was first-run-only (persisted in IndexedDB).
After dismissing, users had no clear path back to it.

Fix:
- Topbar gets a '★ Tour' ghost button next to '?' that fires
  CustomEvent('nv-show-tour') any time.
- Help-center Quickstart adds a primary 'Take the interactive 10-step
  tour' button that closes help and launches the tour.
- nv-help listens for 'nv-show-help-close' to support the help→tour
  hand-off cleanly.

Settings drawer already has 'Replay welcome tour' (added earlier);
this just makes the same action one-click from the always-visible
topbar.

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 dashboard/src/components/nv-help.ts   | 8 ++++++++
 dashboard/src/components/nv-topbar.ts | 5 +++++
 2 files changed, 13 insertions(+)

diff --git a/dashboard/src/components/nv-help.ts b/dashboard/src/components/nv-help.ts
index 400198e3..2d066cf8 100644
--- a/dashboard/src/components/nv-help.ts
+++ b/dashboard/src/components/nv-help.ts
@@ -290,13 +290,16 @@ export class NvHelp extends LitElement {
   override connectedCallback(): void {
     super.connectedCallback();
     window.addEventListener('nv-show-help', this.show as EventListener);
+    window.addEventListener('nv-show-help-close', this.closeListener);
     window.addEventListener('keydown', this.onKey);
   }
   override disconnectedCallback(): void {
     super.disconnectedCallback();
     window.removeEventListener('nv-show-help', this.show as EventListener);
+    window.removeEventListener('nv-show-help-close', this.closeListener);
     window.removeEventListener('keydown', this.onKey);
   }
+  private closeListener = (): void => this.close();
 
   private show = (e: Event): void => {
     const detail = (e as CustomEvent).detail as { section?: Section } | undefined;
@@ -331,6 +334,11 @@ export class NvHelp extends LitElement {
     return html`
       <h2>Quickstart</h2>
       <p class="lead">Seven taps to get from "I just opened the dashboard" to "I'm running my own scene with verified determinism."</p>
+      <button
+        style="display:inline-flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:14px; background:var(--accent); color:#1a0f00; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;"
+        @click=${() => { window.dispatchEvent(new CustomEvent('nv-show-help-close')); window.dispatchEvent(new CustomEvent('nv-show-tour')); }}>
+        ★ Take the interactive 10-step tour
+      </button>
       ${QUICKSTART.map((s) => html`
         <div class="step">
           <div class="num">${s.step}</div>
diff --git a/dashboard/src/components/nv-topbar.ts b/dashboard/src/components/nv-topbar.ts
index 4da00674..a56ee3bc 100644
--- a/dashboard/src/components/nv-topbar.ts
+++ b/dashboard/src/components/nv-topbar.ts
@@ -117,6 +117,11 @@ export class NvTopbar extends LitElement {
         @click=${this.openSeedModal}>
         seed: <b>0x${seedHex}</b>
       </span>
+      <button class="ghost" id="tour-btn" title="Replay the 10-step welcome tour"
+        aria-label="Replay welcome tour"
+        @click=${() => window.dispatchEvent(new CustomEvent('nv-show-tour'))}>
+        ★ Tour
+      </button>
       <button class="ghost" id="help-btn" title="Help (press ? any time)" aria-label="Open help"
         @click=${() => window.dispatchEvent(new CustomEvent('nv-show-help'))}>
         ?