From 06a547875e1543650872da6dab6356f4642a3f04 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bhousel@gmail.com>
Date: Fri, 13 Mar 2026 17:37:54 -0400
Subject: [PATCH 1/3] Add a Rapid3Manager component for using Rapid v3 beta

This adds :
- A `rapid3.ts` component for managing the embedded Rapid editor
  (mostly copied from the preexisting `rapid.ts` component)
- VITE_RAPID3_URL env variable to point to the location of the new Rapid
  (currently locally hosted)
- Some changes to the startup flow to better insert customizations into the
  `prepareAsync` -> `initAsync` -> `startAsync` pipeline

`edit.vue` currently hardcodes `rapid3Manager` for testing,
but we will make it so that the editor can be configurable.
---
 .env.example                  |   1 +
 pages/workspace/[id]/edit.vue |  18 ++-
 services/index.ts             | 109 ++++++++---------
 services/rapid3.ts            | 213 ++++++++++++++++++++++++++++++++++
 4 files changed, 286 insertions(+), 55 deletions(-)
 create mode 100644 services/rapid3.ts

diff --git a/.env.example b/.env.example
index 87ceb8c..63edbe7 100644
--- a/.env.example
+++ b/.env.example
@@ -28,6 +28,7 @@ VITE_OSM_URL=https://osm.workspaces-dev.sidewalks.washington.edu/
 # --- Embedded Editors ---------------------------------------------------------
 # Rapid editor (OSW editing) and Pathways editor (GTFS Pathways editing).
 # These are standalone apps hosted separately.
+VITE_RAPID3_URL=http://127.0.0.1:8080/dist/
 VITE_RAPID_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/
 VITE_PATHWAYS_EDITOR_URL=https://pathways.workspaces-dev.sidewalks.washington.edu/
 
diff --git a/pages/workspace/[id]/edit.vue b/pages/workspace/[id]/edit.vue
index ea2b57d..687e725 100644
--- a/pages/workspace/[id]/edit.vue
+++ b/pages/workspace/[id]/edit.vue
@@ -6,13 +6,17 @@
 </template>
 
 <script setup lang="ts">
-import { pathwaysManager, rapidManager } from '~/services/index'
+import { pathwaysManager, rapidManager, rapid3Manager } from '~/services/index'
 
 const route = useRoute()
 const workspaceId = route.params.id
 const datatype = route.query.datatype
+const editor = route.query.editor
 const editorContainer = ref(null)
-const manager = datatype === 'osw' ? rapidManager : pathwaysManager
+
+//const oswManager = (editor === 'rapid3' && rapid3Manager) ? rapid3Manager : rapidManager
+const oswManager = rapid3Manager  // testing - force Rapid v3
+const manager = datatype === 'osw' ? oswManager : pathwaysManager
 
 function onEditorLoaded() {
   editorContainer.value.appendChild(manager.containerNode)
@@ -20,6 +24,16 @@ function onEditorLoaded() {
 }
 
 onMounted(() => {
+  // If a different Rapid version is already loaded, hard-reload to swap.
+  // Only one version can occupy the global Rapid namespace at a time.
+  if (datatype === 'osw') {
+    const otherManager = manager === rapidManager ? rapid3Manager : rapidManager
+    if (otherManager?.loaded.value) {
+      window.location.reload()
+      return
+    }
+  }
+
   if (!manager.loaded.value) {
     watch(manager.loaded, (val) => {
       if (val) {
diff --git a/services/index.ts b/services/index.ts
index 9cc0bfa..2d18714 100644
--- a/services/index.ts
+++ b/services/index.ts
@@ -1,53 +1,56 @@
-import { reactive } from 'vue';
-import { TdeiAuthStore, TdeiClient, TdeiUserClient } from '~/services/tdei';
-import {
-  AugmentedDiffCache,
-  AugmentedDiffDb,
-  OsmChangeCache,
-  OsmChangeDb,
-  ChangesetManager,
-} from '~/services/changesets';
-import { OsmApiClient } from '~/services/osm';
-import { PathwaysEditorManager } from '~/services/pathways';
-import { ReviewManager } from '~/services/review';
-import { RapidManager } from '~/services/rapid';
-import { WorkspacesClient } from '~/services/workspaces';
-
-const tdeiApiUrl = import.meta.env.VITE_TDEI_API_URL;
-const tdeiUserApiUrl = import.meta.env.VITE_TDEI_USER_API_URL;
-const apiUrl = import.meta.env.VITE_API_URL;
-const newApiUrl = import.meta.env.VITE_NEW_API_URL;
-const osmWebUrl = import.meta.env.VITE_OSM_URL;
-const osmApiUrl = osmWebUrl + 'api/0.6/';
-const rapidUrl = import.meta.env.VITE_RAPID_URL;
-const pathwaysUrl = import.meta.env.VITE_PATHWAYS_EDITOR_URL;
-
-export const tdeiAuth = reactive(new TdeiAuthStore());
-export const tdeiClient = new TdeiClient(tdeiApiUrl, tdeiAuth);
-export const tdeiUserClient = new TdeiUserClient(tdeiUserApiUrl, tdeiClient);
-tdeiClient.restartAutoAuthRefresh();
-
-export const osmClient = new OsmApiClient(osmWebUrl, osmApiUrl, tdeiClient);
-export const workspacesClient = new WorkspacesClient(apiUrl, newApiUrl, tdeiClient, osmClient);
-
-const oscCacheTtl = 1000 * 60 * 60 * 24 * 45; // 45 days
-const adiffCacheTtl = oscCacheTtl;
-const oscKeypath = ['workspaceId', 'changesetId'];
-const adiffKeypath = oscKeypath;
-
-const oscCacheDb = new OsmChangeDb('osc-cache', oscCacheTtl, oscKeypath);
-const adiffCacheDb = new AugmentedDiffDb('adiff-cache', adiffCacheTtl, adiffKeypath);
-
-export const changesetManager = new ChangesetManager(
-  osmClient,
-  new OsmChangeCache(oscCacheDb),
-  new AugmentedDiffCache(adiffCacheDb));
-export const reviewManager = new ReviewManager(
-  changesetManager,
-  osmClient,
-  tdeiClient,
-  workspacesClient,
-);
-
-export const rapidManager = new RapidManager(rapidUrl, osmWebUrl, tdeiAuth);
-export const pathwaysManager = new PathwaysEditorManager(pathwaysUrl, osmWebUrl, tdeiAuth);
+import { reactive } from 'vue';
+import { TdeiAuthStore, TdeiClient, TdeiUserClient } from '~/services/tdei';
+import {
+  AugmentedDiffCache,
+  AugmentedDiffDb,
+  OsmChangeCache,
+  OsmChangeDb,
+  ChangesetManager,
+} from '~/services/changesets';
+import { OsmApiClient } from '~/services/osm';
+import { PathwaysEditorManager } from '~/services/pathways';
+import { ReviewManager } from '~/services/review';
+import { RapidManager } from '~/services/rapid';
+import { Rapid3Manager } from '~/services/rapid3';
+import { WorkspacesClient } from '~/services/workspaces';
+
+const tdeiApiUrl = import.meta.env.VITE_TDEI_API_URL;
+const tdeiUserApiUrl = import.meta.env.VITE_TDEI_USER_API_URL;
+const apiUrl = import.meta.env.VITE_API_URL;
+const newApiUrl = import.meta.env.VITE_NEW_API_URL;
+const osmWebUrl = import.meta.env.VITE_OSM_URL;
+const osmApiUrl = osmWebUrl + 'api/0.6/';
+const rapidUrl = import.meta.env.VITE_RAPID_URL;
+const rapid3Url = import.meta.env.VITE_RAPID3_URL;
+const pathwaysUrl = import.meta.env.VITE_PATHWAYS_EDITOR_URL;
+
+export const tdeiAuth = reactive(new TdeiAuthStore());
+export const tdeiClient = new TdeiClient(tdeiApiUrl, tdeiAuth);
+export const tdeiUserClient = new TdeiUserClient(tdeiUserApiUrl, tdeiClient);
+tdeiClient.restartAutoAuthRefresh();
+
+export const osmClient = new OsmApiClient(osmWebUrl, osmApiUrl, tdeiClient);
+export const workspacesClient = new WorkspacesClient(apiUrl, newApiUrl, tdeiClient, osmClient);
+
+const oscCacheTtl = 1000 * 60 * 60 * 24 * 45; // 45 days
+const adiffCacheTtl = oscCacheTtl;
+const oscKeypath = ['workspaceId', 'changesetId'];
+const adiffKeypath = oscKeypath;
+
+const oscCacheDb = new OsmChangeDb('osc-cache', oscCacheTtl, oscKeypath);
+const adiffCacheDb = new AugmentedDiffDb('adiff-cache', adiffCacheTtl, adiffKeypath);
+
+export const changesetManager = new ChangesetManager(
+  osmClient,
+  new OsmChangeCache(oscCacheDb),
+  new AugmentedDiffCache(adiffCacheDb));
+export const reviewManager = new ReviewManager(
+  changesetManager,
+  osmClient,
+  tdeiClient,
+  workspacesClient,
+);
+
+export const rapidManager = new RapidManager(rapidUrl, osmWebUrl, tdeiAuth);
+export const rapid3Manager = rapid3Url ? new Rapid3Manager(rapid3Url, osmWebUrl, tdeiAuth) : null;
+export const pathwaysManager = new PathwaysEditorManager(pathwaysUrl, osmWebUrl, tdeiAuth);
diff --git a/services/rapid3.ts b/services/rapid3.ts
new file mode 100644
index 0000000..f28108e
--- /dev/null
+++ b/services/rapid3.ts
@@ -0,0 +1,213 @@
+import { ref } from 'vue'
+import type { TdeiAuthStore } from '~/services/tdei'
+
+/** Global `Rapid` namespace injected by the Rapid v3.x script at runtime. */
+declare const Rapid: any
+
+/**
+ * Manages the lifecycle of an embedded Rapid v3.x editor instance.
+ *
+ * Handles loading the Rapid v3.x script and stylesheet into the DOM, initializing
+ * the editor context for a given workspace, switching between workspaces, and
+ * patching Rapid's network layer to inject TDEI auth and workspace headers.
+ *
+ * Instantiated conditionally in `services/index.ts` — only when the
+ * `VITE_RAPID3_URL` environment variable is set.
+ */
+export class Rapid3Manager {
+  #baseUrl: string
+  #osmUrl: string
+  #tdeiAuth: TdeiAuthStore
+
+  /** Reactive flag indicating whether the Rapid 3 script has loaded and is ready. */
+  loaded: ReturnType<typeof ref<boolean>>
+
+  /** The DOM element that the Rapid editor mounts into. */
+  containerNode: HTMLDivElement
+
+  /** The Rapid `Context` instance, available after loading completes. */
+  rapidContext: any
+
+
+  /**
+   * @constructor
+   * @param baseUrl - Base URL where Rapid static assets are served
+   *                  A trailing slash is enforced automatically.
+   * @param osmUrl  - Base URL of the OSM-compatible API backend.
+   * @param tdeiAuth - Reactive auth store providing access tokens and auth state.
+   */
+  constructor(baseUrl: string, osmUrl: string, tdeiAuth: TdeiAuthStore) {
+    this.#baseUrl = baseUrl.replace(/\/*$/, '/')
+    this.#osmUrl = osmUrl.replace(/\/+$/, '')
+    this.#tdeiAuth = tdeiAuth
+
+    this.loaded = ref(false)
+    this.containerNode = document.createElement('div')
+    this.rapidContext = null
+  }
+
+
+  /**
+   * Injects the Rapid v3.x JavaScript and CSS into the document.
+   *
+   * This is a one-time operation — subsequent calls are no-ops if the script
+   * has already been loaded. Once the script loads, {@link #onRapidLoaded} is
+   * called to prepare the Rapid context. If the script fails to load, an error
+   * is logged to the console.
+   */
+  load() {
+    if (this.loaded.value) {
+      return
+    }
+
+    const style = document.createElement('link')
+    style.setAttribute('href', this.#baseUrl + 'css/rapid.css')
+    style.setAttribute('type', 'text/css')
+    style.setAttribute('rel', 'stylesheet')
+    document.head.appendChild(style)
+
+    const script = document.createElement('script')
+    script.src = this.#baseUrl + 'js/rapid-dev.js'
+    script.async = true
+    script.onload = this.#onRapidLoaded.bind(this)
+    script.onerror = (e) => {
+      console.error('Failed to load Rapid3 script from:', script.src, e)
+    }
+    document.body.appendChild(script)
+  }
+
+
+  /**
+   * Script onload handler. Creates the Rapid `Context`, configures it for
+   * embedded mode, and runs `prepareAsync()`. Sets {@link loaded} to `true`
+   * once preparation is complete, signaling to the edit page that
+   * {@link init} can be called.
+   */
+  #onRapidLoaded() {
+    const container = this.containerNode;
+
+    if (typeof Rapid === 'undefined' || !Rapid.utilDetect().support) {
+      container.innerHTML = 'Sorry, your browser is not currently supported.'
+      container.style.padding = '20px'
+
+    } else {
+      const context = new Rapid.Context()
+      context.embed(true);   // hide the account management control
+      context.containerNode = container
+      context.assetPath = this.#baseUrl
+
+      this.rapidContext = context
+      context.prepareAsync()
+        .then(() => {
+          this.loaded.value = true
+        })
+    }
+  }
+
+
+  /**
+   * Initializes the Rapid editor for a specific workspace.
+   *
+   * Configures the workspace ID, TDEI auth, and OSM API connection, then runs
+   * Rapid's async init and start sequence. Must be called after {@link loaded}
+   * becomes `true`.
+   *
+   * @param workspaceId - The numeric ID of the workspace to open for editing.
+   * @returns A promise that resolves once the editor is fully started.
+   */
+  init(workspaceId: number) {
+    const context = this.rapidContext
+    context.workspaceId = workspaceId
+    context.tdeiAuth = this.#tdeiAuth
+    context.preauth = { url: this.#osmUrl, apiUrl: this.#osmUrl }
+
+    return context.initAsync()
+      .then(() => this.#patchRapid())
+      .then(() => context.startAsync())
+  }
+
+
+  /**
+   * Switches the editor to a different workspace without a full reload.
+   *
+   * Updates the workspace ID and dispatches a synthetic `hashchange` event to
+   * make Rapid re-read its configuration from the URL hash, then resets the
+   * editor state.
+   *
+   * @param workspaceId - The numeric ID of the workspace to switch to.
+   * @returns A promise that resolves once the editor has reset.
+   */
+  switchWorkspace(workspaceId: number) {
+    this.rapidContext.workspaceId = workspaceId
+
+    window.dispatchEvent(new HashChangeEvent('hashchange', {
+      newURL: window.location.href,
+      oldURL: window.location.href,
+    }))
+
+    return this.rapidContext.resetAsync()
+  }
+
+
+  /**
+   * Patches Rapid's OSM service layer to use TDEI authentication.
+   *
+   * Replaces the built-in OAuth fetch with {@link #wrapFetch} to inject
+   * workspace and authorization headers, overrides the `authenticated` check
+   * to use TDEI auth state, and stubs out `userDetails` (not needed for
+   * workspace-based changeset uploads).
+   */
+  #patchRapid() {
+    const context = this.rapidContext
+    const rapidOsmService = context.services.osm
+    const rapidOsmClient = rapidOsmService._oauth
+
+    rapidOsmClient.fetch = this.#wrapFetch(rapidOsmClient.fetch)
+    rapidOsmClient.authenticated = () => this.#tdeiAuth.ok
+
+    rapidOsmService.userDetails = (callback: (err: string) => void) => { callback('dummy error') }
+  }
+
+
+  /**
+   * Wraps a fetch function to inject `X-Workspace` and `Authorization` headers
+   * on every request Rapid makes to the OSM API.
+   *
+   * Handles all three header formats that Rapid/osm-auth may use: `Headers`
+   * instance, array of tuples, or plain object. When headers are a plain object,
+   * `Authorization` is defined as non-writable to prevent osm-auth from
+   * overwriting it with its own OAuth token.
+   *
+   * @param innerFetch - The original fetch function from Rapid's OAuth client.
+   * @returns A wrapped fetch function with workspace/auth headers injected.
+   */
+  #wrapFetch(innerFetch: typeof fetch) {
+    return (resource: RequestInfo | URL, options: RequestInit & { headers?: HeadersInit | Record<string, string> }) => {
+      if (!options.headers) {
+        options.headers = new Headers()
+      }
+
+      const tokenHeader = 'Bearer ' + this.#tdeiAuth.accessToken
+
+      if (options.headers instanceof Headers) {
+        options.headers.set('X-Workspace', this.rapidContext.workspaceId)
+        options.headers.set('Authorization', tokenHeader)
+      }
+      else if (Array.isArray(options.headers)) {
+        options.headers.push(['X-Workspace', this.rapidContext.workspaceId])
+        options.headers.push(['Authorization', tokenHeader])
+      }
+      else {
+        options.headers['X-Workspace'] = this.rapidContext.workspaceId
+
+        Object.defineProperty(options.headers, 'Authorization', {
+          value: tokenHeader,
+          writable: false,
+          enumerable: true,
+        })
+      }
+
+      return innerFetch(resource, options)
+    }
+  }
+}

From 25c15395af7d9b7dd2da3d33c88c78ca2b8c2c22 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bhousel@gmail.com>
Date: Tue, 24 Mar 2026 11:27:52 -0400
Subject: [PATCH 2/3] Use `split` edit button w/"Rapid 2" and "Rapid 3"
 options.

This also updates the .env.example file with the appropriate
URLs to fetch from the workspaces-rapid container.
---
 .env.example                     |  4 ++--
 components/dashboard/Toolbar.vue | 30 +++++++++++++++++++++++++++++-
 pages/workspace/[id]/edit.vue    |  3 +--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/.env.example b/.env.example
index 63edbe7..ab50d81 100644
--- a/.env.example
+++ b/.env.example
@@ -28,8 +28,8 @@ VITE_OSM_URL=https://osm.workspaces-dev.sidewalks.washington.edu/
 # --- Embedded Editors ---------------------------------------------------------
 # Rapid editor (OSW editing) and Pathways editor (GTFS Pathways editing).
 # These are standalone apps hosted separately.
-VITE_RAPID3_URL=http://127.0.0.1:8080/dist/
-VITE_RAPID_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/
+VITE_RAPID3_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/rapid3/
+VITE_RAPID_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/rapid2/
 VITE_PATHWAYS_EDITOR_URL=https://pathways.workspaces-dev.sidewalks.washington.edu/
 
 # --- Schema / Example URLs (rarely need to change) ---------------------------
diff --git a/components/dashboard/Toolbar.vue b/components/dashboard/Toolbar.vue
index 76f788b..a531a44 100644
--- a/components/dashboard/Toolbar.vue
+++ b/components/dashboard/Toolbar.vue
@@ -1,6 +1,26 @@
 <template>
   <div class="btn-toolbar">
-    <nuxt-link class="btn btn-dark" :to="editRoute">
+    <b-dropdown
+      v-if="isOsw"
+      split
+      variant="dark"
+      :split-to="editRoute"
+    >
+      <template #button-content>
+        <app-icon
+          variant="edit_location_alt"
+          size="24"
+        />
+        Edit
+      </template>
+      <b-dropdown-item :to="editRoute">
+        Rapid 2 (default)
+      </b-dropdown-item>
+      <b-dropdown-item :to="editRouteRapid3">
+        Rapid 3 (beta)
+      </b-dropdown-item>
+    </b-dropdown>
+    <nuxt-link v-else class="btn btn-dark" :to="editRoute">
       <app-icon variant="edit_location_alt" size="24" />
       Edit
     </nuxt-link>
@@ -54,12 +74,20 @@ const editHash = computed(() => {
   return `#map=${zoom}/${latitude}/${longitude}`;
 });
 
+const isOsw = computed(() => props.workspace.type === 'osw');
+
 const editRoute = computed(() => ({
   path: workspacePath('edit'),
   query: { datatype: props.workspace.type },
   hash: editHash.value
 }));
 
+const editRouteRapid3 = computed(() => ({
+  path: workspacePath('edit'),
+  query: { datatype: props.workspace.type, editor: 'rapid3' },
+  hash: editHash.value
+}));
+
 const reviewRoute = computed(() => workspacePath('review'));
 const exportRoute = computed(() => workspacePath('export'));
 const settingsRoute = computed(() => workspacePath('settings'));
diff --git a/pages/workspace/[id]/edit.vue b/pages/workspace/[id]/edit.vue
index 687e725..715ec42 100644
--- a/pages/workspace/[id]/edit.vue
+++ b/pages/workspace/[id]/edit.vue
@@ -14,8 +14,7 @@ const datatype = route.query.datatype
 const editor = route.query.editor
 const editorContainer = ref(null)
 
-//const oswManager = (editor === 'rapid3' && rapid3Manager) ? rapid3Manager : rapidManager
-const oswManager = rapid3Manager  // testing - force Rapid v3
+const oswManager = (editor === 'rapid3' && rapid3Manager) ? rapid3Manager : rapidManager
 const manager = datatype === 'osw' ? oswManager : pathwaysManager
 
 function onEditorLoaded() {

From ced7c1a483adc85771a5ff13add672b6e06e6e5e Mon Sep 17 00:00:00 2001
From: Bryan Housel <bhousel@gmail.com>
Date: Tue, 24 Mar 2026 11:43:22 -0400
Subject: [PATCH 3/3] Conditionally only offer the Rapid3 option if
 `rapid3Manager` exists

Elsewhere in the code (`index.ts` and `edit.vue`) we have guards
to prevent trying to instantiate Rapid3 if there is no Rapid3 URL
set.

This commit just checks for that in the new dropdown code as well,
so that we won't offer a Rapid3 option if there is not Rapid3Manager.
---
 components/dashboard/Toolbar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/Toolbar.vue b/components/dashboard/Toolbar.vue
index a531a44..7b0655d 100644
--- a/components/dashboard/Toolbar.vue
+++ b/components/dashboard/Toolbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="btn-toolbar">
     <b-dropdown
-      v-if="isOsw"
+      v-if="isOsw && rapid3Available"
       split
       variant="dark"
       :split-to="editRoute"
@@ -57,6 +57,10 @@
 </template>
 
 <script setup lang="ts">
+import { rapid3Manager } from '~/services/index'
+
+const rapid3Available = !!rapid3Manager
+
 const props = defineProps({
   workspace: {
     type: Object,