From a55dce6f3d101de8a668b248202d6faa263f2e59 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 8 May 2026 20:02:34 +0800
Subject: [PATCH] fix(dev): align notification debug with non-production
 Capacitor builds

Add includeDevToolkitRoutes (vite dev or MODE !== production) and use it
from the router, AccountViewView, and NotificationDebugView so the debug
screen matches dev-notifications registration after vite build.

Update the gated banner copy to refer to production Vite builds.
---
 src/router/index.ts                     | 5 +----
 src/utils/includeDevToolkitRoutes.ts    | 6 ++++++
 src/views/AccountViewView.vue           | 7 +++----
 src/views/dev/NotificationDebugView.vue | 7 +++++--
 4 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/includeDevToolkitRoutes.ts

diff --git a/src/router/index.ts b/src/router/index.ts
index a09cc627..3baa6d0e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,10 +10,7 @@ import {
   retrieveAccountDids,
   generateSaveAndActivateIdentity,
 } from "../libs/util";
-
-/** Matches AccountViewView dev toolkit links: `vite build` has DEV false unless MODE is production. */
-const includeDevToolkitRoutes =
-  import.meta.env.DEV || import.meta.env.MODE !== "production";
+import { includeDevToolkitRoutes } from "../utils/includeDevToolkitRoutes";
 
 const routes: Array<RouteRecordRaw> = [
   {
diff --git a/src/utils/includeDevToolkitRoutes.ts b/src/utils/includeDevToolkitRoutes.ts
new file mode 100644
index 00000000..14308ce0
--- /dev/null
+++ b/src/utils/includeDevToolkitRoutes.ts
@@ -0,0 +1,6 @@
+/**
+ * True for `vite dev` and for `vite build` when mode is not `production`
+ * (e.g. `--mode capacitor`, `--mode test`). Use for dev-only routes and UI.
+ */
+export const includeDevToolkitRoutes =
+  import.meta.env.DEV || import.meta.env.MODE !== "production";
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 82d4f060..24f381a1 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -742,7 +742,7 @@
       >
         Logs
       </router-link>
-      <!-- Non-production bundles only; route `dev-notifications` must exist (see router `includeDevToolkitRoutes`). -->
+      <!-- Non-production bundles only; route `dev-notifications` must exist (see `includeDevToolkitRoutes`). -->
       <router-link
         v-if="isDev"
         :to="{ name: 'dev-notifications' }"
@@ -834,6 +834,7 @@ import { PlatformServiceMixin } from "../utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { ACCOUNT_VIEW_CONSTANTS } from "@/constants/accountView";
 import { showSeedPhraseReminder } from "@/utils/seedPhraseReminder";
+import { includeDevToolkitRoutes } from "@/utils/includeDevToolkitRoutes";
 import { AccountSettings, isApiError } from "@/interfaces/accountView";
 import {
   NotificationService,
@@ -896,9 +897,7 @@ export default class AccountViewView extends Vue {
   readonly DEFAULT_IMAGE_API_SERVER: string = DEFAULT_IMAGE_API_SERVER;
   readonly DEFAULT_PARTNER_API_SERVER: string = DEFAULT_PARTNER_API_SERVER;
   readonly PASSKEYS_ENABLED: boolean = PASSKEYS_ENABLED;
-  /** Must stay in sync with `includeDevToolkitRoutes` in `src/router/index.ts`. */
-  readonly isDev: boolean =
-    import.meta.env.DEV || import.meta.env.MODE !== "production";
+  readonly isDev: boolean = includeDevToolkitRoutes;
 
   // Identity and settings properties
   activeDid: string = "";
diff --git a/src/views/dev/NotificationDebugView.vue b/src/views/dev/NotificationDebugView.vue
index 36a62ea8..abb0254b 100644
--- a/src/views/dev/NotificationDebugView.vue
+++ b/src/views/dev/NotificationDebugView.vue
@@ -15,7 +15,9 @@
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border rounded-md overflow-hidden px-4 py-3"
       role="alert"
     >
-      This view is only available in development builds.
+      This screen is hidden in production Vite builds (for example when built
+      with
+      <span class="font-mono text-sm">--mode production</span>).
     </div>
 
     <NotificationDebugPanel v-else />
@@ -25,11 +27,12 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import NotificationDebugPanel from "@/components/dev/NotificationDebugPanel.vue";
+import { includeDevToolkitRoutes } from "@/utils/includeDevToolkitRoutes";
 
 @Component({
   components: { NotificationDebugPanel },
 })
 export default class NotificationDebugView extends Vue {
-  readonly isDev: boolean = import.meta.env.DEV === true;
+  readonly isDev: boolean = includeDevToolkitRoutes;
 }
 </script>