From d95ec6f814b92dda33f73cb56fe031bc97c0a13b Mon Sep 17 00:00:00 2001
From: mannes <info@mbtech.nl>
Date: Thu, 24 Sep 2026 09:42:09 +0200
Subject: [PATCH 1/2] Only reconnect to a verified brush; Disconnect forgets it

After connecting, read DEVICE_TYPE from the Oral-B service. A device that
doesn't answer it (e.g. a multimeter picked in the all-devices chooser) is
rejected and forgotten. Auto-reconnect now targets only the remembered brush
instead of falling back to any device the origin was ever granted, and
Disconnect revokes the permission via device.forget().
---
 src/components/ConnectBar.tsx |  1 +
 src/hooks/useBrush.ts         | 39 +++++++++++++++++++++++++++++------
 src/protocol/oralb.ts         | 38 ++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/src/components/ConnectBar.tsx b/src/components/ConnectBar.tsx
index d544305..8aba542 100644
--- a/src/components/ConnectBar.tsx
+++ b/src/components/ConnectBar.tsx
@@ -78,6 +78,7 @@ export function ConnectBar(props: Props) {
               </button>
               <button
                 onClick={props.onDisconnect}
+                title="Disconnect and forget this brush — connecting again shows the chooser"
                 className="rounded-lg border border-line-strong px-3 py-1.5 text-sm text-fg hover:bg-surface-hover"
               >
                 Disconnect
diff --git a/src/hooks/useBrush.ts b/src/hooks/useBrush.ts
index 747b0ab..270b9bf 100644
--- a/src/hooks/useBrush.ts
+++ b/src/hooks/useBrush.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { OralBBrush } from '../protocol/oralb.ts';
+import { OralBBrush, NotABrushError } from '../protocol/oralb.ts';
 import type { Session, DeviceInfo, BrushHead, LiveState, DiscoveredService, RawFrame } from '../protocol/types.ts';
 
 export type ConnState = 'unsupported' | 'insecure' | 'idle' | 'connecting' | 'connected' | 'error';
@@ -18,6 +18,12 @@ const RECONNECT_POLL_MS = 1000;
 /** Give up a single silent connect attempt after this so an out-of-range brush can't hang it. */
 const RECONNECT_ATTEMPT_TIMEOUT_MS = 4000;
 
+function forgetLastDevice(): void {
+  try {
+    localStorage.removeItem(LAST_DEVICE_KEY);
+  } catch { /* ignore */ }
+}
+
 function withTimeout<T>(p: Promise<T>, ms: number): Promise<T> {
   return new Promise<T>((resolve, reject) => {
     const t = setTimeout(() => reject(new Error('timeout')), ms);
@@ -136,6 +142,13 @@ export function useBrush({ onSync, lastSyncedTimestamp }: UseBrushOptions) {
     try {
       const brush = await OralBBrush.request();
       await brush.connect();
+      try {
+        await brush.verify();
+      } catch (e) {
+        // Wrong device picked: drop the permission so auto-reconnect never comes back to it.
+        await brush.forget();
+        throw e;
+      }
       activate(brush);
     } catch (e) {
       // User cancelling the chooser throws — treat that as a soft return to idle.
@@ -158,18 +171,30 @@ export function useBrush({ onSync, lastSyncedTimestamp }: UseBrushOptions) {
   const tryReconnect = useCallback(async () => {
     if (reconnectingRef.current || pausedRef.current) return;
     if (stateRef.current !== 'idle') return;
-    const devices = await OralBBrush.knownDevices();
-    if (devices.length === 0) return;
     let savedId: string | null = null;
     try {
       savedId = localStorage.getItem(LAST_DEVICE_KEY);
     } catch { /* ignore */ }
-    const target = devices.find((d) => d.id === savedId) ?? devices[0];
+    if (!savedId) return;
+    // Only the brush we last verified — never "whatever else this origin was granted".
+    const target = (await OralBBrush.knownDevices()).find((d) => d.id === savedId);
+    if (!target) return;
 
     reconnectingRef.current = true;
     const brush = OralBBrush.fromDevice(target);
     try {
       await withTimeout(brush.connect(), RECONNECT_ATTEMPT_TIMEOUT_MS);
+      try {
+        await withTimeout(brush.verify(), RECONNECT_ATTEMPT_TIMEOUT_MS);
+      } catch (e) {
+        if (e instanceof NotABrushError) {
+          // Remembered from before this check existed — forget it for good.
+          forgetLastDevice();
+          await brush.forget();
+          return;
+        }
+        throw e;
+      }
       // Re-check we didn't connect/disconnect elsewhere while awaiting.
       if (stateRef.current === 'idle' && !pausedRef.current) {
         activate(brush);
@@ -183,9 +208,11 @@ export function useBrush({ onSync, lastSyncedTimestamp }: UseBrushOptions) {
     }
   }, [activate]);
 
+  /** Disconnect = forget: revoke the permission so the brush isn't silently reconnected. */
   const disconnect = useCallback(() => {
-    pausedRef.current = true; // stop the background poll until the user reconnects
-    brushRef.current?.disconnect();
+    pausedRef.current = true; // belt and braces where forget() is unsupported
+    forgetLastDevice();
+    void brushRef.current?.forget();
     brushRef.current = null;
     cleanup();
     setState('idle');
diff --git a/src/protocol/oralb.ts b/src/protocol/oralb.ts
index 5174d5c..acc9aa1 100644
--- a/src/protocol/oralb.ts
+++ b/src/protocol/oralb.ts
@@ -93,6 +93,14 @@ const LIVE_SUBSCRIPTIONS: LiveSubscription[] = [
   { service: SERVICE.GENERAL, uuid: CHAR.SMILEY, apply: (v, s) => { s.smiley = decodeSmiley(v); } },
 ];
 
+/** The picked/remembered device doesn't speak the Oral-B protocol (e.g. some other BLE gadget). */
+export class NotABrushError extends Error {
+  constructor(deviceName?: string) {
+    super(`${deviceName ? `"${deviceName}"` : 'That device'} doesn't look like an Oral-B brush.`);
+    this.name = 'NotABrushError';
+  }
+}
+
 export class OralBBrush {
   readonly device: BluetoothDevice;
   private server: BluetoothRemoteGATTServer | null = null;
@@ -173,6 +181,36 @@ export class OralBBrush {
     this.device.gatt?.disconnect();
   }
 
+  /**
+   * Disconnect and revoke this origin's permission for the device, so getDevices() no longer
+   * returns it and silent reconnect can't pick it up. Falls back to a plain disconnect where
+   * forget() is unavailable (Chrome < 101).
+   */
+  async forget(): Promise<void> {
+    this.device.removeEventListener('gattserverdisconnected', this.onDisconnectBound);
+    this.device.gatt?.disconnect();
+    if (typeof this.device.forget === 'function') {
+      try {
+        await this.device.forget();
+      } catch { /* already revoked */ }
+    }
+  }
+
+  /**
+   * Confirm the connected device really is an Oral-B brush: it must expose the Oral-B GENERAL
+   * service and answer a DEVICE_TYPE read with a well-formed 1- or 3-byte value. Read-only, and
+   * present on every generation. Throws NotABrushError otherwise.
+   */
+  async verify(): Promise<DeviceInfo> {
+    const typeChar = await this.getCharacteristic(SERVICE.GENERAL, CHAR.DEVICE_TYPE);
+    if (!typeChar) throw new NotABrushError(this.device.name);
+    try {
+      return decodeDeviceType(await typeChar.readValue());
+    } catch {
+      throw new NotABrushError(this.device.name);
+    }
+  }
+
   /** Detach device-level listeners for a brush we're abandoning (e.g. a failed reconnect). */
   dispose(): void {
     this.device.removeEventListener('gattserverdisconnected', this.onDisconnectBound);

From a80d16601ab0b66d0ee1352c84d4afb2bda0e594 Mon Sep 17 00:00:00 2001
From: mannes <info@mbtech.nl>
Date: Thu, 24 Sep 2026 09:42:09 +0200
Subject: [PATCH 2/2] Ask for a device report once; trouble toast on any error;
 new footer

The 'how is it working' ask shows once per install (legacy per-model keys
still count). The trouble toast shows on any error, including sync failures
while connected. The footer links libreble, GitHub and 'Report an issue', and
shows the build version (tag, git describe, or APP_VERSION).
---
 Dockerfile                     |  4 ++-
 src/App.tsx                    |  5 ++--
 src/components/AppFooter.tsx   | 53 ++++++++++++++++++++++++++++++++++
 src/components/ReportToast.tsx | 29 ++++++++++---------
 src/vite-env.d.ts              |  3 ++
 vite.config.ts                 | 14 +++++++++
 6 files changed, 91 insertions(+), 17 deletions(-)
 create mode 100644 src/components/AppFooter.tsx

diff --git a/Dockerfile b/Dockerfile
index c281c56..1304c57 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -9,7 +9,9 @@ COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 ARG BASE_PATH=/
-RUN BASE_PATH="$BASE_PATH" npm run build
+# .git isn't in the build context, so pass the version in: --build-arg APP_VERSION=v1.2.0
+ARG APP_VERSION=dev
+RUN BASE_PATH="$BASE_PATH" APP_VERSION="$APP_VERSION" npm run build
 
 FROM nginxinc/nginx-unprivileged:1.29-alpine AS serve
 ARG BASE_PATH=/
diff --git a/src/App.tsx b/src/App.tsx
index 33a622e..067d3b4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import { ConnectBar } from './components/ConnectBar.tsx';
 import { LiveSession } from './components/LiveSession.tsx';
 import { DiagnosticsPanel } from './components/DiagnosticsPanel.tsx';
 import { ReportToast } from './components/ReportToast.tsx';
+import { AppFooter } from './components/AppFooter.tsx';
 import { StatGrid } from './components/StatGrid.tsx';
 import { TrendChart } from './components/TrendChart.tsx';
 import { Insights } from './components/Insights.tsx';
@@ -92,9 +93,7 @@ export default function App() {
           </>
         )}
 
-        <footer className="pt-2 text-center text-[11px] text-fg-subtle">
-          Brushlog · self-owned · offline-first · your data never leaves this device
-        </footer>
+        <AppFooter />
       </main>
 
       {savedToast && (
diff --git a/src/components/AppFooter.tsx b/src/components/AppFooter.tsx
new file mode 100644
index 0000000..5fb074f
--- /dev/null
+++ b/src/components/AppFooter.tsx
@@ -0,0 +1,53 @@
+const REPO = 'https://github.com/libreble/brushlog';
+/** A clean tag build ("v1.2.0") links to its release; anything else is shown as plain text. */
+const RELEASE = /^v\d+\.\d+\.\d+$/.test(__APP_VERSION__) ? `${REPO}/releases/tag/${__APP_VERSION__}` : null;
+
+const LINK = 'inline-flex items-center gap-1 hover:text-fg';
+
+export function AppFooter() {
+  return (
+    <footer className="pt-2 text-[11px] text-fg-subtle">
+      <p className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
+        <a href="https://libreble.github.io/" className={LINK}>
+          <LibrebleMark />
+          Part of <span className="font-medium">libre<span className="text-[#c2410c] dark:text-[#ffa259]">ble</span></span>
+        </a>
+        <a href={REPO} target="_blank" rel="noopener noreferrer" className={LINK}>
+          <GitHubMark />
+          GitHub
+        </a>
+        <a href={`${REPO}/issues/new/choose`} target="_blank" rel="noopener noreferrer" className={LINK}>
+          Report an issue
+        </a>
+        {RELEASE ? (
+          <a href={RELEASE} target="_blank" rel="noopener noreferrer" className={`${LINK} font-mono`}>
+            {__APP_VERSION__}
+          </a>
+        ) : (
+          <span className="font-mono">{__APP_VERSION__}</span>
+        )}
+      </p>
+    </footer>
+  );
+}
+
+/** The libreble "open beacon": an LED inside two rings opening to the top right. */
+function LibrebleMark() {
+  return (
+    <svg viewBox="0 0 64 64" className="h-3.5 w-3.5" aria-hidden>
+      <g transform="translate(32 32) rotate(-45) translate(-32 -32)" fill="none" stroke="currentColor" strokeWidth="6" strokeLinecap="round">
+        <path d="M44.36 40.50A15 15 0 1 1 44.36 23.50" />
+        <path d="M54.69 42.50A25 25 0 1 1 54.69 21.50" />
+      </g>
+      <circle cx="32" cy="32" r="6.5" className="fill-[#f26b1d] dark:fill-[#ff8a3d]" />
+    </svg>
+  );
+}
+
+function GitHubMark() {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5" aria-hidden>
+      <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
+    </svg>
+  );
+}
diff --git a/src/components/ReportToast.tsx b/src/components/ReportToast.tsx
index 2744f5a..1fcdeb3 100644
--- a/src/components/ReportToast.tsx
+++ b/src/components/ReportToast.tsx
@@ -13,11 +13,13 @@ interface Props {
   raised: boolean;
 }
 
-const doneKey = (d: DeviceInfo) => `brushlog.reportDone.${d.modelId}-${d.protocolVersion ?? 'x'}`;
+/** Asked once per install, whatever the model — a working brush shouldn't nag. */
+const DONE_KEY = 'brushlog.reportDone';
 
-function isDone(d: DeviceInfo): boolean {
+function isDone(): boolean {
   try {
-    return localStorage.getItem(doneKey(d)) !== null;
+    // Older builds stored one key per model (brushlog.reportDone.<model>-<protocol>) — honour those.
+    return Object.keys(localStorage).some((k) => k === DONE_KEY || k.startsWith(`${DONE_KEY}.`));
   } catch {
     return false;
   }
@@ -25,28 +27,29 @@ function isDone(d: DeviceInfo): boolean {
 
 /**
  * A dismissible, non-blocking toast inviting a device report (see lib/report.ts):
- *  - a brush that isn't an iO connected → "how is it working?", once per model (dismiss or report);
- *  - the chooser was dismissed or connecting failed → "trouble finding or connecting?",
- *    hidden on dismiss until the next cancel/failure.
+ *  - a brush that isn't an iO connected → "how is it working?", once per install (dismiss or report);
+ *  - the chooser was dismissed or any error (connect, wrong device, sync) → "trouble with your
+ *    brush?", hidden on dismiss until the next cancel/error.
  * Both open a pre-filled GitHub issue form; the user reviews and submits it there.
  */
 export function ReportToast({ state, cancelled, error, device, discovery, raised }: Props) {
   const [doneNow, setDoneNow] = useState(false);
   const [problemDismissed, setProblemDismissed] = useState(false);
-  const problem = cancelled || state === 'error';
+  const problem = cancelled || state === 'error' || error !== null;
 
+  // Re-arm once the problem clears, or when a different error replaces the dismissed one.
   useEffect(() => {
-    if (!problem) setProblemDismissed(false);
-  }, [problem]);
+    setProblemDismissed(false);
+  }, [problem, error]);
 
   // Wait for discovery so the report carries the GATT layout.
   const ask =
-    state === 'connected' && device && discovery && !isConfirmedModel(device) && !doneNow && !isDone(device);
+    state === 'connected' && device && discovery && !isConfirmedModel(device) && !doneNow && !isDone();
 
   if (ask) {
     const finish = () => {
       try {
-        localStorage.setItem(doneKey(device), '1');
+        localStorage.setItem(DONE_KEY, '1');
       } catch { /* storage unavailable — it may ask again next time */ }
       setDoneNow(true);
     };
@@ -60,10 +63,10 @@ export function ReportToast({ state, cancelled, error, device, discovery, raised
     );
   }
 
-  if (problem && !problemDismissed && state !== 'connected') {
+  if (problem && !problemDismissed) {
     return (
       <Toast raised={raised} onDismiss={() => setProblemDismissed(true)}>
-        <p>Trouble finding or connecting your brush?</p>
+        <p>Trouble with your brush?</p>
         <a
           href={connectionProblemUrl(error)}
           target="_blank"
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 64251fb..5634c50 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,2 +1,5 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/client" />
+
+/** Build version for the footer — see appVersion() in vite.config.ts. */
+declare const __APP_VERSION__: string;
diff --git a/vite.config.ts b/vite.config.ts
index 0544770..0913e62 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
 import { VitePWA } from 'vite-plugin-pwa';
+import { execSync } from 'node:child_process';
 
 // Brushlog is a fully local PWA: no backend, no analytics, no cloud.
 // The service worker precaches the app shell so it runs offline once installed.
@@ -10,8 +11,21 @@ import { VitePWA } from 'vite-plugin-pwa';
 // Self-hosters override it: `BASE_PATH=/ npm run build` (the Docker image does this).
 const base = `/${(process.env.BASE_PATH ?? '/brushlog/').replace(/^\/+|\/+$/g, '')}/`.replace('//', '/');
 
+// Shown in the footer. Tag builds in CI use the tag (v1.2.0); elsewhere `git describe`
+// (v1.2.0-3-gabc1234, or a bare sha on a shallow clone); `APP_VERSION` overrides; no git → "dev".
+function appVersion(): string {
+  if (process.env.APP_VERSION) return process.env.APP_VERSION;
+  if (process.env.GITHUB_REF_TYPE === 'tag' && process.env.GITHUB_REF_NAME) return process.env.GITHUB_REF_NAME;
+  try {
+    return execSync('git describe --tags --always', { stdio: ['ignore', 'pipe', 'ignore'] }).toString().trim();
+  } catch {
+    return 'dev';
+  }
+}
+
 export default defineConfig({
   base,
+  define: { __APP_VERSION__: JSON.stringify(appVersion()) },
   plugins: [
     react(),
     tailwindcss(),