From 8eb30ac974d772c9d5fb23a5eaba6e5769bd5989 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Wed, 22 Jan 2025 19:31:29 -0800
Subject: [PATCH 01/11] Add TDEI dataset metadata types

---
 types/tdei.ts | 89 +++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 82 insertions(+), 7 deletions(-)

diff --git a/types/tdei.ts b/types/tdei.ts
index 1839fc7..f397d0b 100644
--- a/types/tdei.ts
+++ b/types/tdei.ts
@@ -1,5 +1,86 @@
 export type TdeiRoleAssignment = string;
 
+//
+// Dataset metadata schema
+// https://raw.githubusercontent.com/TaskarCenterAtUW/TDEI-osw-datasvc-ts/master/schema/metadata.schema.json
+//
+
+export interface TdeiDatasetMetadataDatasetDetail {
+  name: string;
+  version: string;
+  collected_by: string;
+  collection_date: string;
+  data_source: '3rdParty' | 'TDEITools' | 'InHouse';
+  schema_version: string;
+  description?: string | null;
+  custom_metadata?: Record<string, unknown> | null;
+  valid_from?: string | null;
+  valid_to?: string | null;
+  collection_method?: 'manual' | 'transform' | 'generated' | 'AV' | 'others' | null;
+  dataset_area?: object | null;
+}
+
+export interface TdeiDatasetMetadataDataProvenance {
+  full_dataset_name: string;
+  other_published_locations?: string | null;
+  dataset_update_frequency_months?: number | null;
+  schema_validation_run?: boolean | null;
+  schema_validation_run_description?: string | null;
+  allow_crowd_contributions?: boolean | null;
+  location_inaccuracy_factors?: string | null;
+}
+
+export interface TdeiDatasetMetadataDatasetSummary {
+  collection_name?: string | null;
+  department_name?: string | null;
+  city?: string | null;
+  region?: string | null;
+  county?: string | null;
+  key_limitations?: string | null;
+  release_notes?: string | null;
+  challenges?: string | null;
+}
+
+export interface TdeiDatasetMetadataMaintenance {
+  official_maintainer?: string[] | null;
+  last_updated?: string | null;
+  update_frequency?: string | null;
+  authorization_chain?: string | null;
+  maintenance_funded?: boolean | null;
+  funding_details?: string | null;
+}
+
+export interface TdeiDatasetMetadataMethodology {
+  point_data_collection_device?: string | null;
+  node_locations_and_attributes_editing_software?: string | null;
+  data_collected_by_people?: boolean | null;
+  data_collectors?: string | null;
+  data_captured_automatically?: boolean | null;
+  automated_collection?: string | null;
+  data_collectors_organization?: string | null;
+  data_collector_compensation?: string | null;
+  preprocessing_location?: string | null;
+  preprocessing_by?: string | null;
+  preprocessing_steps?: string | null;
+  data_collection_preprocessing_documentation?: boolean | null;
+  documentation_uri?: string | null;
+  validation_process_exists?: boolean | null;
+  validation_process_description?: string | null;
+  validation_conducted_by?: string | null;
+  excluded_data?: string | null;
+  excluded_data_reason?: string | null;
+}
+
+/** Full upload metadata envelope sent to the TDEI API. */
+export interface TdeiDatasetMetadata {
+  dataset_detail: TdeiDatasetMetadataDatasetDetail;
+  data_provenance?: TdeiDatasetMetadataDataProvenance;
+  dataset_summary?: TdeiDatasetMetadataDatasetSummary;
+  maintenance?: TdeiDatasetMetadataMaintenance;
+  methodology?: TdeiDatasetMetadataMethodology;
+}
+
+
 /** Shape returned by the TDEI project-group-roles API */
 export interface TdeiProjectGroupApiResponse {
   tdei_project_group_id: string;
@@ -32,13 +113,7 @@ export interface TdeiDatasetApiResponse {
     tdei_service_id: string;
     service_name?: string;
   };
-  metadata: {
-    dataset_detail: {
-      name: string;
-      version?: string;
-      dataset_area?: object;
-    };
-  };
+  metadata: TdeiDatasetMetadata;
 }
 
 export interface TdeiDatasetItem {

From cb4a6ea05b410b4c109bdacc89e03c8998939cd5 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 23 Jan 2025 12:06:55 -0800
Subject: [PATCH 02/11] Add changesets option when exporting to TDEI

---
 pages/workspace/[id]/export/tdei.vue |  36 +++++-
 services/export/tdei.ts              | 177 +++++++++++++++++++++++----
 services/osm.ts                      |   9 +-
 services/tdei.ts                     |  27 ++--
 4 files changed, 209 insertions(+), 40 deletions(-)

diff --git a/pages/workspace/[id]/export/tdei.vue b/pages/workspace/[id]/export/tdei.vue
index e6ba869..6ee1a12 100644
--- a/pages/workspace/[id]/export/tdei.vue
+++ b/pages/workspace/[id]/export/tdei.vue
@@ -84,6 +84,32 @@
               Dataset Version
               <input v-model.trim="datasetVersion" class="form-control" />
             </label>
+            <div class="form-check form-switch mt-3">
+              <label class="form-check-label">
+                <input v-model="includeChangesets" type="checkbox" class="form-check-input" />
+                Export change history
+              </label>
+            </div>
+            <div class="form-text mt-1">
+              Attaches a <code>changeset.zip</code> to the export which
+              contains a <code>manifest.json</code> summary metadata file
+              and a <code>changesets/</code> directory with one
+              <code>{id}.json</code> file per change history entry.
+            </div>
+            <div v-if="includeChangesets" class="mt-3">
+              <div class="form-check form-switch">
+                <label class="form-check-label">
+                  <input v-model="includeRawOsc" type="checkbox" class="form-check-input" />
+                  Include raw osmChange XML files
+                </label>
+              </div>
+              <div class="form-text mt-1">
+                Adds an <code>{id}.osc</code> file alongside each
+                <code>{id}.json</code> containing unprocessed
+                <a href="https://wiki.openstreetmap.org/wiki/OsmChange" target="_blank">osmChange XML</a>
+                for use with third-party OpenStreetMap tools.
+              </div>
+            </div>
           </fieldset>
           <div class="card-footer">
             <template v-if="context.active">
@@ -117,6 +143,7 @@
 <script setup lang="ts">
 import { osmClient, tdeiClient, tdeiUserClient, workspacesClient } from '~/services/index';
 import { TdeiExporter, TdeiExporterContext } from '~/services/export/tdei'
+import type { TdeiDatasetMetadataDatasetDetail } from '~/types/tdei';
 import { toast } from 'vue3-toastify';
 import 'vue3-toastify/dist/index.css';
 
@@ -148,10 +175,12 @@ const oldMetadata = workspace.tdeiMetadata ? JSON.parse(workspace.tdeiMetadata)
 
 const datasetName = ref(workspace.title);
 const datasetVersion = ref(oldMetadata.metadata?.dataset_detail?.version);
+const includeChangesets = ref(true);
+const includeRawOsc = ref(false);
 
 async function upload() {
   // TODO: enable metadata customization
-	const metadata = {
+	const metadata: TdeiDatasetMetadataDatasetDetail = {
 		"name": datasetName.value,
 		"version": datasetVersion.value,
 		"description": oldMetadata.description ?? '',
@@ -163,7 +192,10 @@ async function upload() {
 		"dataset_area": oldMetadata.dataset_area
 	};
 
-  const jobId = await exporter.upload(workspace, metadata);
+  const jobId = await exporter.upload(workspace, metadata, {
+    includeChangesets: includeChangesets.value,
+    includeRawOsc: includeRawOsc.value,
+  });
 
   if (jobId) {
     // TODO: show a more helpful message
diff --git a/services/export/tdei.ts b/services/export/tdei.ts
index 98d091f..604d669 100644
--- a/services/export/tdei.ts
+++ b/services/export/tdei.ts
@@ -1,13 +1,30 @@
-import { BlobReader, BlobWriter, ZipReader } from '@zip.js/zip.js';
+import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
+import parseOsmChangeXml from '@osmcha/osmchange-parser';
 
 import { OsmApiClient } from '~/services/osm';
 import { buildPathwaysCsvArchive, openTdeiPathwaysArchive } from '~/services/pathways';
 import { TdeiClient, TdeiClientError, TdeiConversionError } from '~/services/tdei';
+import type { TdeiDatasetMetadataDatasetDetail, TdeiDatasetMetadata } from '~/types/tdei';
+import type { Workspace } from '~/types/workspaces';
 import * as geojson from '~/util/geojson'
 
+export class TdeiExporterValidationError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'TdeiExporterValidationError';
+  }
+}
+
+interface ExportOptions {
+  includeChangesets?: boolean;
+  includeRawOsc?: boolean;
+}
+
 const status = {
   idle: 'Idle',
+  validate: 'Validating...',
   bbox: 'Finding workspace bounds...',
+  collectChangesets: 'Collecting changesets...',
   exportOsm: 'Fetching workspace data...',
   convertOsm: 'Converting workspace data...',
   checkDerived: 'Checking previous dataset...',
@@ -17,6 +34,10 @@ const status = {
 };
 
 export class TdeiExporterContext {
+  active!: boolean;
+  status!: string;
+  error!: string | null;
+
   constructor() {
     this.reset();
   }
@@ -33,6 +54,10 @@ export class TdeiExporterContext {
 }
 
 export class TdeiExporter {
+  private _tdeiClient: TdeiClient;
+  private _osmClient: OsmApiClient;
+  private _context: TdeiExporterContext;
+
   constructor(
     tdeiClient: TdeiClient,
     osmClient: OsmApiClient,
@@ -47,34 +72,60 @@ export class TdeiExporter {
     return this._context;
   }
 
-  async upload(workspace, metadata): Promise<number> {
+  async upload(
+    workspace: Workspace,
+    metadata: TdeiDatasetMetadataDatasetDetail,
+    options: ExportOptions = {}
+  ): Promise<string | undefined> {
     this._context.reset();
     this._context.active = true;
 
     try {
-      return await this._run(workspace, metadata);
+      return await this._run(workspace, metadata, options);
     } catch (e: any) {
-      if (this._context.status === status.convertOsm) {
-        this._context.error = 'Conversion job failed: ';
-      } else if (this._context.status === status.upload) {
-        this._context.error = 'TDEI rejected the upload: ';
+      if (e instanceof TdeiExporterValidationError) {
+        this._context.error = e.message;
       } else {
-        this._context.error = 'Unexpected error: ';
-      }
-
-      if (e instanceof TdeiClientError) {
-        this._context.error += await e.response.text();
-      } else if (e instanceof TdeiConversionError) {
-        this._context.error += e.job.message;
-      } else {
-        this._context.error += e.toString();
+        if (this._context.status === status.collectChangesets) {
+          this._context.error = 'Failed to collect changesets: ';
+        } else if (this._context.status === status.convertOsm) {
+          this._context.error = 'Conversion job failed: ';
+        } else if (this._context.status === status.upload) {
+          this._context.error = 'TDEI rejected the upload: ';
+        } else {
+          this._context.error = 'Unexpected error: ';
+        }
+
+        if (e instanceof TdeiClientError) {
+          this._context.error += await e.response.text();
+        } else if (e instanceof TdeiConversionError) {
+          this._context.error += e.job.message;
+        } else {
+          this._context.error += e.toString();
+        }
       }
     } finally {
       this._context.active = false;
     }
   }
 
-  async _run(workspace, metadata): Promise<number> {
+  private _validate(workspace: Workspace): asserts workspace is Workspace & { tdeiServiceId: string } {
+    if (!workspace.tdeiProjectGroupId) {
+      throw new TdeiExporterValidationError('This workspace does not have a TDEI project group assigned.');
+    }
+    if (!workspace.tdeiServiceId) {
+      throw new TdeiExporterValidationError('This workspace does not have a TDEI service assigned. Please select a service before exporting.');
+    }
+  }
+
+  private async _run(
+    workspace: Workspace,
+    metadata: TdeiDatasetMetadataDatasetDetail,
+    options: ExportOptions
+  ): Promise<string> {
+    this._context.status = status.validate;
+    this._validate(workspace);
+
     if (!metadata.dataset_area) {
       this._context.status = status.bbox;
       const bbox = await this._osmClient.getWorkspaceBbox(workspace.id);
@@ -87,14 +138,28 @@ export class TdeiExporter {
       }
     }
 
+    let changesetArchive: Blob | undefined;
+
+    if (options.includeChangesets) {
+      this._context.status = status.collectChangesets;
+      changesetArchive = await this._buildChangesetArchive(
+        workspace,
+        options.includeRawOsc ?? false
+      );
+    }
+
     if (workspace.type === 'pathways') {
-      return await this._exportPathwaysToTdei(workspace, metadata);
+      return await this._exportPathwaysToTdei(workspace, metadata, changesetArchive);
     }
 
-    return await this._exportOswToTdei(workspace, metadata);
+    return await this._exportOswToTdei(workspace, metadata, changesetArchive);
   }
 
-  async _exportOswToTdei(workspace, metadata): Promise<number> {
+  private async _exportOswToTdei(
+    workspace: Workspace & { tdeiServiceId: string },
+    metadata: TdeiDatasetMetadataDatasetDetail,
+    changesetArchive?: Blob
+  ): Promise<string> {
     this._context.status = status.exportOsm;
     const osm = await this._osmClient.exportWorkspaceXml(workspace.id);
 
@@ -107,7 +172,8 @@ export class TdeiExporter {
       workspace.tdeiProjectGroupId,
       workspace.tdeiServiceId,
       oswZip,
-      { dataset_detail: metadata }
+      { dataset_detail: metadata },
+      changesetArchive
     );
 
     this._context.status = status.complete;
@@ -115,7 +181,11 @@ export class TdeiExporter {
     return jobId
   }
 
-  async _exportPathwaysToTdei(workspace, metadata): Promise<number> {
+  private async _exportPathwaysToTdei(
+    workspace: Workspace & { tdeiServiceId: string },
+    metadata: TdeiDatasetMetadataDatasetDetail,
+    changesetArchive?: Blob
+  ): Promise<string> {
     this._context.status = status.exportOsm;
     const elements = await this._osmClient.getWorkspaceData(workspace.id);
     const derivedFromDatasetId = await this._filterNonexistentDataset(workspace.tdeiRecordId);
@@ -130,16 +200,20 @@ export class TdeiExporter {
       workspace.tdeiProjectGroupId,
       workspace.tdeiServiceId,
       csvZip,
-      { dataset_detail: metadata }
+      { dataset_detail: metadata },
+      changesetArchive
     );
 
-
     this._context.status = status.complete;
 
     return jobId
   }
 
-  async _filterNonexistentDataset(tdeiRecordId: string): Promise<boolean> {
+  private async _filterNonexistentDataset(tdeiRecordId: string | undefined): Promise<string | undefined> {
+    if (tdeiRecordId === undefined) {
+      return undefined
+    }
+
     const oldStatus = this._context.status;
 
     this._context.status = status.checkDerived;
@@ -153,7 +227,7 @@ export class TdeiExporter {
     return undefined;
   }
 
-  async _fetchPathwaysDataset(tdeiRecordId: string) {
+  private async _fetchPathwaysDataset(tdeiRecordId: string | undefined) {
     if (!tdeiRecordId) {
       return undefined;
     }
@@ -163,4 +237,55 @@ export class TdeiExporter {
 
     return await openTdeiPathwaysArchive(dataset, false, false);
   }
+
+  private async _buildChangesetArchive(workspace: Workspace, includeRawOsc: boolean): Promise<Blob> {
+    const changesets = await this._osmClient.listChangesets(workspace.id);
+
+    const manifest = {
+      workspace: {
+        id: workspace.id,
+        title: workspace.title,
+        description: workspace.description,
+        type: workspace.type,
+        tdeiProjectGroupId: workspace.tdeiProjectGroupId,
+        tdeiServiceId: workspace.tdeiServiceId,
+        tdeiRecordId: workspace.tdeiRecordId,
+        createdAt: workspace.createdAt,
+        createdBy: workspace.createdBy,
+        createdByName: workspace.createdByName,
+      },
+      exportedAt: new Date().toISOString(),
+      includesRawOsmChange: includeRawOsc,
+      changesets,
+    };
+
+    const files = new Map<string, string>();
+    files.set('manifest.json', JSON.stringify(manifest, null, 2));
+
+    // Provide the more-friendly JSON format by default. A super user can opt-
+    // in to the osmChange format if they wish to use those with OSM tooling:
+    //
+    await Promise.all(changesets.map(async (cs) => {
+      const osc = await this._osmClient.getOsmChangeXml(workspace.id, cs.id);
+      const osmChange = parseOsmChangeXml(osc);
+
+      files.set(`changesets/${cs.id}.json`, JSON.stringify(osmChange));
+
+      if (includeRawOsc) {
+        files.set(`changesets/${cs.id}.osc`, osc);
+      }
+    }));
+
+    const blobWriter = new BlobWriter('application/zip');
+    const zipWriter = new ZipWriter(blobWriter);
+
+    await Promise.all(
+      [...files].map(
+        ([name, content]) => zipWriter.add(name, new TextReader(content))
+      )
+    );
+    await zipWriter.close();
+
+    return await blobWriter.getData();
+  }
 }
diff --git a/services/osm.ts b/services/osm.ts
index 9f41aea..3013ee6 100644
--- a/services/osm.ts
+++ b/services/osm.ts
@@ -396,9 +396,7 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     return changeset;
   }
 
-  async getOsmChange(workspaceId: WorkspaceId, changesetId: number)
-    : Promise<OsmChange>
-  {
+  async getOsmChangeXml(workspaceId: WorkspaceId, changesetId: number): Promise<string> {
     const response = await this._get(`changeset/${changesetId}/download`, {
       headers: {
         ...this._requestHeaders,
@@ -406,8 +404,11 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
         'X-Workspace': workspaceId,
       },
     });
+    return await response.text();
+  }
 
-    const osmChange = parseOsmChangeXml(await response.text());
+  async getOsmChange(workspaceId: WorkspaceId, changesetId: number): Promise<OsmChange> {
+    const osmChange = parseOsmChangeXml(await this.getOsmChangeXml(workspaceId, changesetId));
 
     for (const type of OSMCHANGE_ACTION_TYPES) {
       for (const element of osmChange[type] ?? []) {
diff --git a/services/tdei.ts b/services/tdei.ts
index 7c3b1e5..21c578b 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -10,6 +10,7 @@ import type {
   TdeiProjectGroup,
   TdeiService,
   TdeiDatasetSummary,
+  TdeiDatasetMetadata,
   TdeiUserItem,
 } from '~/types/tdei.ts';
 
@@ -268,19 +269,24 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
   }
 
   async uploadOswDataset(
-    tdeiRecordId: string,
+    tdeiRecordId: string | undefined,
     projectGroupId: string,
     serviceId: string,
     dataset: Blob,
-    metadata: any
-  ) {
+    metadata: TdeiDatasetMetadata,
+    changeset?: Blob
+  ): Promise<string> {
     const body = new FormData();
     body.append('dataset', new File([dataset], 'dataset.zip', { type: 'application/x-zip-compressed' }));
     body.append('metadata', new File([JSON.stringify(metadata)], 'metadata.json', { type: 'application/json' }));
 
+    if (changeset) {
+      body.append('changeset', new File([changeset], 'changeset.zip', { type: 'application/x-zip-compressed' }));
+    }
+
     let resource = `osw/upload/${projectGroupId}/${serviceId}`;
 
-    if (tdeiRecordId?.length > 0) {
+    if (tdeiRecordId?.length) {
       resource += '?derived_from_dataset_id=' + tdeiRecordId;
     }
 
@@ -292,19 +298,24 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
   }
 
   async uploadPathwaysDataset(
-    tdeiRecordId: string,
+    tdeiRecordId: string | undefined,
     projectGroupId: string,
     serviceId: string,
     dataset: Blob,
-    metadata: any
-  ) {
+    metadata: TdeiDatasetMetadata,
+    changeset?: Blob
+  ): Promise<string> {
     const body = new FormData();
     body.append('dataset', new File([dataset], 'dataset.zip', { type: 'application/x-zip-compressed' }));
     body.append('metadata', new File([JSON.stringify(metadata)], 'metadata.json', { type: 'application/json' }));
 
+    if (changeset) {
+      body.append('changeset', new File([changeset], 'changeset.zip', { type: 'application/x-zip-compressed' }));
+    }
+
     let resource = `gtfs-pathways/upload/${projectGroupId}/${serviceId}`;
 
-    if (tdeiRecordId?.length > 0) {
+    if (tdeiRecordId?.length) {
       resource += '?derived_from_dataset_id=' + tdeiRecordId;
     }
 

From a8c65f4c832966bd01fcac886d3f0c7dc53f49de Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 30 Apr 2026 22:29:33 -0700
Subject: [PATCH 03/11] Add option to certify exports for ADA compliance

---
 pages/workspace/[id]/export/tdei.vue | 34 ++++++++++++++++++++++++++--
 services/export/tdei.ts              | 15 +++++++++---
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/pages/workspace/[id]/export/tdei.vue b/pages/workspace/[id]/export/tdei.vue
index 6ee1a12..16531a4 100644
--- a/pages/workspace/[id]/export/tdei.vue
+++ b/pages/workspace/[id]/export/tdei.vue
@@ -57,7 +57,7 @@
         </div>
 
         <form v-else class="card">
-          <fieldset class="card-body" :disabled="context.active || context.error">
+          <fieldset class="card-body" :disabled="context.active || !!context.error">
             <label class="d-block">
               Dataset Name
               <input v-model.trim="datasetName" class="form-control" />
@@ -95,6 +95,7 @@
               contains a <code>manifest.json</code> summary metadata file
               and a <code>changesets/</code> directory with one
               <code>{id}.json</code> file per change history entry.
+              <p class="mb-0 mt-1">Required to certify the export for ADA compliance.</p>
             </div>
             <div v-if="includeChangesets" class="mt-3">
               <div class="form-check form-switch">
@@ -109,6 +110,27 @@
                 <a href="https://wiki.openstreetmap.org/wiki/OsmChange" target="_blank">osmChange XML</a>
                 for use with third-party OpenStreetMap tools.
               </div>
+              <div class="form-check form-switch mt-3">
+                <label class="form-check-label">
+                  <input v-model="includeAdaCertification" type="checkbox" class="form-check-input" />
+                  Certify for ADA compliance
+                </label>
+              </div>
+              <div class="form-text mt-1">
+                Adds an attestation to the changeset manifest confirming that
+                this dataset's measurements accurately reflect field conditions
+                and were collected according to your agency's methodology. Your
+                agency determines the specific criteria. This is a data
+                integrity sign-off, not a separate legal credential.
+              </div>
+              <div v-if="includeAdaCertification" class="mt-3 border rounded p-3 bg-light small">
+                <dl class="row mb-0">
+                  <dt class="col-sm-4 text-muted">Certified by</dt>
+                  <dd class="col-sm-8 mb-1">{{ certifiedByName }}</dd>
+                  <dt class="col-sm-4 text-muted">Date</dt>
+                  <dd class="col-sm-8 mb-0">{{ certifiedAt }}</dd>
+                </dl>
+              </div>
             </div>
           </fieldset>
           <div class="card-footer">
@@ -175,8 +197,11 @@ const oldMetadata = workspace.tdeiMetadata ? JSON.parse(workspace.tdeiMetadata)
 
 const datasetName = ref(workspace.title);
 const datasetVersion = ref(oldMetadata.metadata?.dataset_detail?.version);
-const includeChangesets = ref(true);
+const includeChangesets = ref(false);
 const includeRawOsc = ref(false);
+const includeAdaCertification = ref(false);
+const certifiedByName = osmClient.auth.displayName ?? '';
+const certifiedAt = new Date().toISOString().slice(0, 10);
 
 async function upload() {
   // TODO: enable metadata customization
@@ -195,6 +220,11 @@ async function upload() {
   const jobId = await exporter.upload(workspace, metadata, {
     includeChangesets: includeChangesets.value,
     includeRawOsc: includeRawOsc.value,
+    adaCertification: includeChangesets.value && includeAdaCertification.value ? {
+      certifiedBy: osmClient.auth.subject,
+      certifiedByName,
+      certifiedAt,
+    } : undefined,
   });
 
   if (jobId) {
diff --git a/services/export/tdei.ts b/services/export/tdei.ts
index 604d669..e2b7d8c 100644
--- a/services/export/tdei.ts
+++ b/services/export/tdei.ts
@@ -15,9 +15,16 @@ export class TdeiExporterValidationError extends Error {
   }
 }
 
+interface AdaCertificationInfo {
+  certifiedBy: string;
+  certifiedByName: string;
+  certifiedAt: string;
+}
+
 interface ExportOptions {
   includeChangesets?: boolean;
   includeRawOsc?: boolean;
+  adaCertification?: AdaCertificationInfo;
 }
 
 const status = {
@@ -140,11 +147,12 @@ export class TdeiExporter {
 
     let changesetArchive: Blob | undefined;
 
-    if (options.includeChangesets) {
+    if (options.includeChangesets || options.adaCertification) {
       this._context.status = status.collectChangesets;
       changesetArchive = await this._buildChangesetArchive(
         workspace,
-        options.includeRawOsc ?? false
+        options.includeRawOsc ?? false,
+        options.adaCertification
       );
     }
 
@@ -238,7 +246,7 @@ export class TdeiExporter {
     return await openTdeiPathwaysArchive(dataset, false, false);
   }
 
-  private async _buildChangesetArchive(workspace: Workspace, includeRawOsc: boolean): Promise<Blob> {
+  private async _buildChangesetArchive(workspace: Workspace, includeRawOsc: boolean, adaCertification?: AdaCertificationInfo): Promise<Blob> {
     const changesets = await this._osmClient.listChangesets(workspace.id);
 
     const manifest = {
@@ -256,6 +264,7 @@ export class TdeiExporter {
       },
       exportedAt: new Date().toISOString(),
       includesRawOsmChange: includeRawOsc,
+      adaCertification: adaCertification ?? null,
       changesets,
     };
 

From 36e80ba8438b875c59ff2af658ed8bb6a179aaa6 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Sat, 7 Mar 2026 23:09:39 -0700
Subject: [PATCH 04/11] Update review queue for auto-flagged changesets

---
 components/review/Details.vue         |  5 ++++
 components/review/FilterDropdown.vue  | 10 +++++++
 components/review/Item.vue            |  6 +++++
 components/review/Overlay.vue         |  2 ++
 components/review/Toolbar.vue         | 28 ++++++++++++++++++-
 components/settings/panel/General.vue | 39 ++++++++++++++++++++++++++-
 pages/workspace/[id]/review.vue       | 26 ++++++++++++++++++
 services/review.ts                    | 15 ++++++++++-
 services/workspaces.ts                |  4 +++
 types/workspaces.ts                   |  2 ++
 10 files changed, 134 insertions(+), 3 deletions(-)

diff --git a/components/review/Details.vue b/components/review/Details.vue
index adde49a..658bc6b 100644
--- a/components/review/Details.vue
+++ b/components/review/Details.vue
@@ -38,6 +38,11 @@ const getChangesetMetadata = (changeset: OsmChangeset) => ({
   'Editor': changeset.tags?.created_by,
   'Source': changeset.tags?.source,
   'Imagery': changeset.tags?.imagery_used,
+  'Review Status': changeset.tags?.reviewed_by
+    ? `Reviewed by ${changeset.tags.reviewed_by}`
+    : changeset.tags?.review_requested === 'yes'
+      ? 'Needs Review'
+      : undefined,
   'Created By': changeset.user,
   'User ID': changeset.uid,
   'Created At': formatShort(changeset.created_at),
diff --git a/components/review/FilterDropdown.vue b/components/review/FilterDropdown.vue
index 3f6abe0..9256539 100644
--- a/components/review/FilterDropdown.vue
+++ b/components/review/FilterDropdown.vue
@@ -59,6 +59,16 @@
           Show Resolved
         </label>
       </div>
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeNeedsReview"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Needs Review Only
+        </label>
+      </div>
     </div>
 
     <div class="dropdown-divider" />
diff --git a/components/review/Item.vue b/components/review/Item.vue
index c470c73..9fb0901 100644
--- a/components/review/Item.vue
+++ b/components/review/Item.vue
@@ -19,6 +19,12 @@
         >
           Resolved
         </span>
+        <span
+          v-if="props.item.needsReview"
+          class="badge bg-warning text-dark mx-1"
+        >
+          Needs Review
+        </span>
       </span>
       <span :class="elapsedClasses">
         <app-icon
diff --git a/components/review/Overlay.vue b/components/review/Overlay.vue
index cb2c57a..435e301 100644
--- a/components/review/Overlay.vue
+++ b/components/review/Overlay.vue
@@ -5,6 +5,7 @@
       v-model:show-discussion="showDiscussion"
       :item="item"
       @edit="props.onEdit"
+      @resolve="$emit('resolve')"
     />
 
     <div class="review-overlay-panels">
@@ -29,6 +30,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+defineEmits(['resolve']);
 
 const showDetails = ref(false);
 const showDiscussion = ref(false);
diff --git a/components/review/Toolbar.vue b/components/review/Toolbar.vue
index ee3d36a..b05be25 100644
--- a/components/review/Toolbar.vue
+++ b/components/review/Toolbar.vue
@@ -66,6 +66,28 @@
         </div>
       </template>
     </BPopover>
+    <BPopover
+      :disabled="isValidator"
+      content="Only validators and owners can resolve changesets reviews"
+      placement="bottom"
+    >
+      <template #target>
+        <div class="d-inline-block ms-2">
+          <button
+            v-show="props.item.isChangeset && props.item.needsReview"
+            class="btn btn-sm btn-success"
+            :disabled="!isValidator"
+            @click="resolveChangeset"
+          >
+            <app-icon
+              variant="check"
+              no-margin
+            />
+            <span class="d-none d-sm-inline ms-2">Mark as Reviewed</span>
+          </button>
+        </div>
+      </template>
+    </BPopover>
   </nav>
 </template>
 
@@ -79,7 +101,7 @@ interface Props {
 const props = defineProps<Props>();
 const { isValidator } = useWorkspaceRole();
 
-const emit = defineEmits(['edit']);
+const emit = defineEmits(['edit', 'resolve']);
 const showDetails = defineModel<boolean>('showDetails');
 const showDiscussion = defineModel<boolean>('showDiscussion');
 
@@ -87,6 +109,10 @@ function edit() {
   emit('edit');
 }
 
+function resolveChangeset() {
+  emit('resolve');
+}
+
 function toggleDetails() {
   showDetails.value = !showDetails.value;
 }
diff --git a/components/settings/panel/General.vue b/components/settings/panel/General.vue
index 5ff13a9..5e9325b 100644
--- a/components/settings/panel/General.vue
+++ b/components/settings/panel/General.vue
@@ -8,7 +8,7 @@
         class="mb-3"
       >
         <app-icon variant="info" />
-        Only workspace owners can rename the workspace.
+        Only workspace owners can change workspace settings.
       </b-alert>
       <form @submit.prevent="rename">
         <label class="d-block mb-3">
@@ -28,6 +28,29 @@
           Rename
         </button>
       </form>
+
+      <hr>
+
+      <div class="form-check form-switch">
+        <input
+          id="autoFlagReview"
+          v-model="autoFlagReview"
+          type="checkbox"
+          class="form-check-input"
+          :disabled="!isLead"
+          @change="saveAutoFlagReview"
+        >
+        <label
+          class="form-check-label"
+          for="autoFlagReview"
+        >
+          Auto-flag contributor changesets for review
+        </label>
+      </div>
+      <small class="text-muted">
+        When enabled, changesets created by contributors (non-leads and non-validators)
+        will be automatically flagged for review in the review queue.
+      </small>
     </div>
   </section>
 </template>
@@ -41,6 +64,7 @@ import type { Workspace } from '~/types/workspaces';
 const workspace = inject<Workspace>('workspace')!;
 const { isLead } = useWorkspaceRole();
 const workspaceName = ref(workspace.title);
+const autoFlagReview = ref(workspace.autoFlagReview ?? false);
 
 async function rename() {
   try {
@@ -58,4 +82,17 @@ async function rename() {
     }
   }
 }
+
+async function saveAutoFlagReview() {
+  try {
+    await workspacesClient.updateWorkspace(workspace.id, {
+      autoFlagReview: autoFlagReview.value,
+    });
+    toast.success('Review settings saved.');
+  }
+  catch (e) {
+    autoFlagReview.value = !autoFlagReview.value;
+    toast.error('Failed to save review settings.');
+  }
+}
 </script>
diff --git a/pages/workspace/[id]/review.vue b/pages/workspace/[id]/review.vue
index 220144b..eb95d18 100644
--- a/pages/workspace/[id]/review.vue
+++ b/pages/workspace/[id]/review.vue
@@ -41,6 +41,7 @@
         v-if="currentItem"
         :item="currentItem"
         @edit="openEditor"
+        @resolve="resolveCurrentChangeset"
       />
       <review-attribute-diff
         v-if="currentDiff && reviewList.workspace"
@@ -52,11 +53,13 @@
 </template>
 
 <script setup lang="ts">
+import { toast } from 'vue3-toastify';
 import { reviewManager, workspacesClient } from '~/services/index';
 
 import type ReviewMap from '~/components/review/Map.vue';
 import type { ReviewListItem } from '~/services/review.ts';
 import type { AdiffAction } from '~/types/adiff';
+import type { OsmChangeset } from '~/types/osm';
 
 const route = useRoute();
 const workspaceId = Number(route.params.id);
@@ -95,6 +98,29 @@ async function refresh() {
   }
 }
 
+async function resolveCurrentChangeset() {
+  if (!currentItem.value?.isChangeset) {
+    return;
+  }
+
+  const changesetId = currentItem.value.id;
+
+  try {
+    await workspacesClient.resolveChangeset(workspaceId, changesetId);
+
+    const changeset = currentItem.value.data as OsmChangeset;
+    delete changeset.tags.review_requested;
+    changeset.tags.reviewed_by = String(changesetId);
+
+    toast.success('Changeset marked as reviewed.');
+
+    await refresh();
+  }
+  catch {
+    toast.error('Failed to resolve changeset.');
+  }
+}
+
 async function openEditor() {
   if (!map.value) {
     return;
diff --git a/services/review.ts b/services/review.ts
index d5634bb..4b7c560 100644
--- a/services/review.ts
+++ b/services/review.ts
@@ -44,6 +44,8 @@ export class ReviewListItem {
 
   get isResolved(): boolean {
     switch (this.type) {
+      case $CHANGESET:
+        return !!(this.data as OsmChangeset).tags?.reviewed_by;
       case $FEEDBACK:
         return (this.data as TdeiFeedback).status !== 'open';
       case $NOTE:
@@ -53,6 +55,10 @@ export class ReviewListItem {
     return false;
   }
 
+  get needsReview(): boolean {
+    return this.isChangeset && (this.data as OsmChangeset).tags?.review_requested === 'yes';
+  }
+
   get displayType(): string {
     switch (this.type) {
       case $CHANGESET:
@@ -116,7 +122,7 @@ export class ReviewListItem {
   get badgeClass(): string {
     switch (this.type) {
       case $CHANGESET:
-        return 'bg-dark';
+        return this.needsReview ? 'bg-warning text-dark' : 'bg-dark';
       case $FEEDBACK:
         return 'bg-danger';
       case $NOTE:
@@ -151,6 +157,7 @@ export class ReviewListFilter {
   includeFeedback: boolean = true;
   includeNotes: boolean = true;
   includeResolved: boolean = false;
+  includeNeedsReview: boolean = false;
   startDate: Date | undefined;
   endDate: Date | undefined;
   text: string | undefined;
@@ -173,6 +180,12 @@ export class ReviewListFilter {
     if (this.text && !changeset.tags?.comment?.includes(this.text)) {
       return false;
     }
+    if (!this.includeResolved && changeset.tags?.reviewed_by) {
+      return false;
+    }
+    if (this.includeNeedsReview && changeset.tags?.review_requested !== 'yes') {
+      return false;
+    }
 
     return true;
   }
diff --git a/services/workspaces.ts b/services/workspaces.ts
index d9e9709..5a0e370 100644
--- a/services/workspaces.ts
+++ b/services/workspaces.ts
@@ -229,6 +229,10 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     await this.#newApi._delete(`workspaces/${id}/users/${userUuid}`);
   }
 
+  async resolveChangeset(workspaceId: WorkspaceId, changesetId: number): Promise<void> {
+    await this.#newApi._put(`workspaces/${workspaceId}/changesets/${changesetId}/resolve`);
+  }
+
   #setAuthHeader() {
     if (this.#tdeiClient.auth.complete) {
       this._requestHeaders.Authorization = 'Bearer ' + this.auth.accessToken;
diff --git a/types/workspaces.ts b/types/workspaces.ts
index c6b7a53..3b48475 100644
--- a/types/workspaces.ts
+++ b/types/workspaces.ts
@@ -17,6 +17,7 @@ export interface Workspace {
   createdByName: string;
   externalAppAccess: WorkspaceAppAccess;
   kartaViewToken?: string;
+  autoFlagReview?: boolean;
   role?: WorkspaceRole;
 }
 
@@ -36,6 +37,7 @@ export interface WorkspacePatch {
   title?: string;
   description?: string;
   externalAppAccess?: WorkspaceAppAccess;
+  autoFlagReview?: boolean;
 }
 
 export type QuestSettingsType = 'NONE' | 'JSON' | 'URL';

From 4ea57cc369899c0d1e7143f01a5b25d0ee60fad7 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Mon, 9 Mar 2026 22:14:00 -0700
Subject: [PATCH 05/11] Clean up http client headers

---
 services/http.ts       | 60 +++++++++++++++++++++++++++++++-----------
 services/osm.ts        | 51 ++++++++++++++++++-----------------
 services/tdei.ts       | 40 +++++++++++++++++-----------
 services/workspaces.ts | 14 +++++++---
 4 files changed, 105 insertions(+), 60 deletions(-)

diff --git a/services/http.ts b/services/http.ts
index 3e818b4..eb7dbc0 100644
--- a/services/http.ts
+++ b/services/http.ts
@@ -1,3 +1,9 @@
+export type FetchConfig = Omit<RequestInit, 'headers'> & {
+  headers?: Record<string, string>;
+};
+
+export type HttpBody = BodyInit | object;
+
 export class BaseHttpClientError extends Error {
   response: Response;
 
@@ -25,27 +31,27 @@ export abstract class BaseHttpClient {
     return this._baseUrl + rest
   }
 
-  _get(url: string, config?: object): Promise<Response> {
+  _get(url: string, config?: FetchConfig): Promise<Response> {
     return this._send(url, 'GET', undefined, config);
   }
 
-  _post(url: string, body?: any, config?: object): Promise<Response> {
+  _post(url: string, body?: HttpBody, config?: FetchConfig): Promise<Response> {
     return this._send(url, 'POST', body, config);
   }
 
-  _put(url: string, body?: any, config?: object): Promise<Response> {
+  _put(url: string, body?: HttpBody, config?: FetchConfig): Promise<Response> {
     return this._send(url, 'PUT', body, config);
   }
 
-  _patch(url: string, body?: any, config?: object): Promise<Response> {
+  _patch(url: string, body?: HttpBody, config?: FetchConfig): Promise<Response> {
     return this._send(url, 'PATCH', body, config);
   }
 
-  _delete(url: string, config?: object): Promise<Response> {
+  _delete(url: string, config?: FetchConfig): Promise<Response> {
     return this._send(url, 'DELETE', undefined, config);
   }
 
-  async _sendTest(url: string, method: string, body?: any): Promise<Response> {
+  async _sendTest(url: string, method: string, body?: HttpBody): Promise<Response> {
     const response = await fetch(this.url(url), {
       method,
       body,
@@ -62,22 +68,46 @@ export abstract class BaseHttpClient {
     return response;
   }
 
-  async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  async _send(
+    url: string,
+    method: string,
+    body?: HttpBody,
+    config?: FetchConfig,
+  ): Promise<Response> {
+    const { headers: configHeaders, ...restConfig } = config ?? {};
+    const mergedHeaders: Record<string, string> = {
+      ...this._requestHeaders,
+      ...configHeaders,
+    };
     const requestOptions = {
       method,
-      body,
-      headers: this._requestHeaders,
+      body: undefined as BodyInit | undefined,
+      headers: mergedHeaders,
       signal: this._abortSignal,
-      ...config
+      ...restConfig,
     };
 
-    if (requestOptions.headers['Content-Type'] === 'application/json'
-      && !(body instanceof FormData)
-      && typeof body !== 'undefined'
-      && body !== null
-    ) {
+    // Let the browser set Content-Type (and multipart boundary) for FormData:
+    if (body instanceof FormData) {
+      delete mergedHeaders['Content-Type'];
+      requestOptions.body = body;
+    }
+    else if (body !== null && body !== undefined && (
+      mergedHeaders['Content-Type'] === 'application/json'
+      || (
+        typeof body === 'object'
+        && !(body instanceof Blob)
+        && !(body instanceof ArrayBuffer)
+        && !ArrayBuffer.isView(body)
+        && !(body instanceof URLSearchParams)
+        && !(body instanceof ReadableStream)
+      )
+    )) {
       requestOptions.body = JSON.stringify(body);
     }
+    else {
+      requestOptions.body = body as BodyInit;
+    }
 
     const response = await fetch(this.url(url), requestOptions);
 
diff --git a/services/osm.ts b/services/osm.ts
index 3013ee6..635a1ba 100644
--- a/services/osm.ts
+++ b/services/osm.ts
@@ -1,7 +1,12 @@
 import parseOsmChangeXml from '@osmcha/osmchange-parser';
 import type { FeatureCollection, Point } from 'geojson';
 
-import { BaseHttpClient, BaseHttpClientError } from "~/services/http";
+import {
+  BaseHttpClient,
+  BaseHttpClientError,
+  type FetchConfig,
+  type HttpBody,
+} from '~/services/http';
 import * as xml from '~/util/xml';
 
 import type { ICancelableClient } from '~/services/loading';
@@ -14,7 +19,6 @@ import type {
   OsmElement,
   OsmNode,
   OsmNote,
-  OsmTags,
   OsmWay,
 } from '~/types/osm';
 import type { WorkspaceId } from '~/types/workspaces';
@@ -207,7 +211,9 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     this.#webUrl = webUrl;
     this.#tdeiClient = tdeiClient;
     this.#setAuthHeader();
-    this._requestHeaders['Accept'] = 'text/plain';
+
+    // OSM API can return XML or JSON based on the header or file extension:
+    this._requestHeaders['Accept'] = '*/*';
     this._requestHeaders['Content-Type'] = 'text/plain';
   }
 
@@ -234,8 +240,8 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
       display_name: this.auth.displayName
     };
 
-    await this._put(`user/${this.auth.subject}`, JSON.stringify(body), {
-      headers: { ...this._requestHeaders, 'Content-Type': 'application/json' }
+    await this._put(`user/${this.auth.subject}`, body, {
+      headers: { 'Content-Type': 'application/json' }
     });
   }
 
@@ -286,7 +292,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
   ): Promise<OsmElement> {
     const response = await this._get(`${type}/${id}/${version}`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId,
       },
@@ -301,7 +306,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
   async getNodes(workspaceId: WorkspaceId, nodeIds: (number | string)[]): Promise<OsmNode[]> {
     const response = await this._get(`nodes?nodes=${nodeIds.join(',')}`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId,
       },
@@ -319,7 +323,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
   async getWays(workspaceId: WorkspaceId, wayIds: (number | string)[]): Promise<OsmWay[]> {
     const response = await this._get(`ways?ways=${wayIds.join(',')}`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId,
       },
@@ -337,7 +340,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
   async getWaysForNode(workspaceId: WorkspaceId, nodeId: number): Promise<OsmElement[]> {
     const response = await this._get(`node/${nodeId}/ways`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId,
       },
@@ -348,7 +350,7 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
 
   async listChangesets(workspaceId: WorkspaceId): Promise<OsmChangeset[]> {
     const response = await this._get(`changesets.json`, {
-      headers: { ...this._requestHeaders, 'X-Workspace': workspaceId },
+      headers: { 'X-Workspace': workspaceId },
     });
 
     const changesets = (await response.json())?.changesets ?? [];
@@ -374,7 +376,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
 
     const response = await this._get(url, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId,
       },
@@ -399,7 +400,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
   async getOsmChangeXml(workspaceId: WorkspaceId, changesetId: number): Promise<string> {
     const response = await this._get(`changeset/${changesetId}/download`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/xml',
         'X-Workspace': workspaceId,
       },
@@ -428,7 +428,7 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
 
     const body = xml.serialize(doc);
     const response = await this._put('changeset/create', body, {
-      headers: { ...this._requestHeaders, 'X-Workspace': workspaceId },
+      headers: { 'X-Workspace': workspaceId },
     });
 
     return Number(await response.text());
@@ -442,7 +442,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     await this._post(`changeset/${changesetId}/upload`, changesetXml, {
       headers: {
         'Content-Type': 'application/xml',
-        'Authorization': this._requestHeaders['Authorization'],
         'X-Workspace': workspaceId,
       },
     });
@@ -469,10 +468,7 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     body.append('text', message);
 
     await this._post(`changeset/${changesetId}/comment`, body, {
-      headers: {
-        'Authorization': this._requestHeaders['Authorization'],
-        'X-Workspace': workspaceId,
-      },
+      headers: { 'X-Workspace': workspaceId },
     });
   }
 
@@ -485,7 +481,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
 
     const response = await this._get(`notes/search.json?${params}`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId,
       },
@@ -498,7 +493,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     const bboxParam = await this.getExportBbox(workspaceId);
     const response = await this._get(`map.json?bbox=${bboxParam}`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/json',
         'X-Workspace': workspaceId
       }
@@ -511,7 +505,6 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     const bboxParam = await this.getExportBbox(workspaceId);
     const response = await this._get(`map?bbox=${bboxParam}`, {
       headers: {
-        ...this._requestHeaders,
         'Accept': 'application/xml',
         'X-Workspace': workspaceId
       }
@@ -526,17 +519,23 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     }
   }
 
-  async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  override async _send(
+    url: string,
+    method: string,
+    body?: HttpBody,
+    config?: FetchConfig,
+  ): Promise<Response> {
     try {
       await this.#tdeiClient.tryRefreshAuth();
       this.#setAuthHeader();
 
-      const requestOptions = {
-        credentials: 'include'
-      }
+      const requestOptions: FetchConfig = {
+        credentials: 'include',
+      };
 
       return await super._send(url, method, body, { ...requestOptions, ...config });
-    } catch (e: any) {
+    }
+    catch (e: unknown) {
       if (e instanceof BaseHttpClientError) {
         throw new OsmApiClientError(e.response);
       }
diff --git a/services/tdei.ts b/services/tdei.ts
index 21c578b..c08d236 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -1,6 +1,11 @@
 import { BlobReader, BlobWriter, ZipReader } from '@zip.js/zip.js';
 
-import { BaseHttpClient, BaseHttpClientError } from '~/services/http';
+import {
+  BaseHttpClient,
+  BaseHttpClientError,
+  type FetchConfig,
+  type HttpBody,
+} from '~/services/http';
 import type { ICancelableClient } from '~/services/loading';
 import type {
   TdeiFeedback,
@@ -290,9 +295,7 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
       resource += '?derived_from_dataset_id=' + tdeiRecordId;
     }
 
-    const response = await this._post(resource, body, {
-      headers: { 'Authorization': this._requestHeaders['Authorization'] }
-    });
+    const response = await this._post(resource, body);
 
     return await response.text();
   }
@@ -319,9 +322,7 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
       resource += '?derived_from_dataset_id=' + tdeiRecordId;
     }
 
-    const response = await this._post(resource, body, {
-      headers: { 'Authorization': this._requestHeaders['Authorization'] }
-    });
+    const response = await this._post(resource, body);
 
     return await response.text();
   }
@@ -346,10 +347,7 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
       await new Promise(resolve => setTimeout(resolve, 4000));
 
       const statusResponse = await this._get(`jobs?job_id=${jobId}&tdei_project_group_id=${projectGroupId}`, {
-        headers: {
-          'Accept': 'application/text',
-          'Authorization': this._requestHeaders['Authorization']
-        }
+        headers: { 'Accept': 'application/text' }
       });
       const statusBody = (await statusResponse.json())[0];
       const statusText = statusBody.status.toLowerCase();
@@ -435,14 +433,20 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     }
   }
 
-  override async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  override async _send(
+    url: string,
+    method: string,
+    body?: HttpBody,
+    config?: FetchConfig,
+  ): Promise<Response> {
     try {
       if (this.#auth.needsRefresh) {
         await this.refreshToken();
       }
 
       return await super._send(url, method, body, config);
-    } catch (e: any) {
+    }
+    catch (e: unknown) {
       if (e instanceof BaseHttpClientError) {
         throw new TdeiClientError(e.response);
       }
@@ -526,13 +530,19 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     }
   }
 
-  override async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  override async _send(
+    url: string,
+    method: string,
+    body?: HttpBody,
+    config?: FetchConfig,
+  ): Promise<Response> {
     try {
       await this.#tdeiClient.tryRefreshAuth();
       this.#setAuthHeader();
 
       return await super._send(url, method, body, config);
-    } catch (e: any) {
+    }
+    catch (e: unknown) {
       if (e instanceof BaseHttpClientError) {
         throw new TdeiUserClientError(e.response);
       }
diff --git a/services/workspaces.ts b/services/workspaces.ts
index 5a0e370..4b6d4a4 100644
--- a/services/workspaces.ts
+++ b/services/workspaces.ts
@@ -1,4 +1,9 @@
-import { BaseHttpClient, BaseHttpClientError } from "~/services/http";
+import {
+  BaseHttpClient,
+  BaseHttpClientError,
+  type FetchConfig,
+  type HttpBody,
+} from '~/services/http';
 import { buildPathwaysCsvArchive } from '~/services/pathways';
 import { compareStringAsc } from '~/util/compare';
 
@@ -242,15 +247,16 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
   override async _send(
     url: string,
     method: string,
-    body?: any,
-    config?: object
+    body?: HttpBody,
+    config?: FetchConfig,
   ): Promise<Response> {
     try {
       await this.#tdeiClient.tryRefreshAuth();
       this.#setAuthHeader();
 
       return await super._send(url, method, body, config);
-    } catch (e) {
+    }
+    catch (e: unknown) {
       if (e instanceof BaseHttpClientError) {
         throw new WorkspacesClientError(e.response);
       }

From 5fe19d818b98c80b3a29a6a62cd7ba1d386f5350 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Tue, 10 Mar 2026 10:27:46 -0700
Subject: [PATCH 06/11] Clean up testing code in HTTP client

---
 services/http.ts | 17 -----------------
 services/tdei.ts | 18 +++++++++++-------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/services/http.ts b/services/http.ts
index eb7dbc0..57791e2 100644
--- a/services/http.ts
+++ b/services/http.ts
@@ -51,23 +51,6 @@ export abstract class BaseHttpClient {
     return this._send(url, 'DELETE', undefined, config);
   }
 
-  async _sendTest(url: string, method: string, body?: HttpBody): Promise<Response> {
-    const response = await fetch(this.url(url), {
-      method,
-      body,
-      headers: {
-        'Accept': 'application/text',
-        'Authorization': this._requestHeaders.Authorization
-      }
-    });
-
-    if (!response.ok) {
-      throw new BaseHttpClientError(response);
-    }
-
-    return response;
-  }
-
   async _send(
     url: string,
     method: string,
diff --git a/services/tdei.ts b/services/tdei.ts
index c08d236..126aa80 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -243,13 +243,17 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
   }
 
   async downloadOswDataset(tdeiRecordId: string, format: string = 'osw'): Promise<Blob> {
-    const response = await this._sendTest(`osw/${tdeiRecordId}?format=${format}`, 'GET');
+    const response = await this._get(`osw/${tdeiRecordId}?format=${format}`, {
+      headers: { Accept: '*/*' },
+    });
 
     return (await response.blob());
   }
 
   async downloadPathwaysDataset(tdeiDatasetId: string): Promise<Blob> {
-    const response = await this._sendTest(`gtfs-pathways/${tdeiDatasetId}`, 'GET');
+    const response = await this._get(`gtfs-pathways/${tdeiDatasetId}`, {
+      headers: { Accept: '*/*' },
+    });
 
     return (await response.blob());
   }
@@ -339,16 +343,14 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     const filename = sourceFormat === 'osw' ? 'osw.zip' : 'osm.xml';
     body.append('file', new File([dataset], filename));
 
-    const jobResponse = await this._sendTest('osw/convert', 'POST', body);
+    const jobResponse = await this._post('osw/convert', body);
     const jobId = (await jobResponse.text());
 
     while (true) {
       console.info(`Waiting for dataset conversion job ${jobId}...`);
       await new Promise(resolve => setTimeout(resolve, 4000));
 
-      const statusResponse = await this._get(`jobs?job_id=${jobId}&tdei_project_group_id=${projectGroupId}`, {
-        headers: { 'Accept': 'application/text' }
-      });
+      const statusResponse = await this._get(`jobs?job_id=${jobId}&tdei_project_group_id=${projectGroupId}`);
       const statusBody = (await statusResponse.json())[0];
       const statusText = statusBody.status.toLowerCase();
 
@@ -361,7 +363,9 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
       }
     }
 
-    const fileResponse = await this._sendTest(`job/download/${jobId}`, 'GET');
+    const fileResponse = await this._get(`job/download/${jobId}`, {
+      headers: { 'Accept': '*/*' },
+    });
 
     return await fileResponse.blob();
   }

From c6e1aaa897ca41ec8df127970ab9095c20db5c8d Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Fri, 22 May 2026 23:49:12 -0700
Subject: [PATCH 07/11] Switch to SQL-based augmented diffs

---
 services/changesets.ts | 320 ++---------------------------------------
 services/index.ts      |   1 +
 services/workspaces.ts |   7 +
 3 files changed, 19 insertions(+), 309 deletions(-)

diff --git a/services/changesets.ts b/services/changesets.ts
index 49d6c1e..df2bfb6 100644
--- a/services/changesets.ts
+++ b/services/changesets.ts
@@ -1,27 +1,17 @@
 import type { OsmApiClient } from '~/services/osm';
-import { OSMCHANGE_ACTION_TYPES } from '~/types/osm';
+import type { WorkspacesClient } from '~/services/workspaces';
 import { LruIndexedDbCache } from '~/services/cache';
 
+import { OSMCHANGE_ACTION_TYPES } from '~/types/osm';
+
 import type { LocalCache } from '~/services/cache';
 import type {
   OsmChange,
   OsmChangeset,
-  OsmElement,
-  OsmNode,
-  OsmElementType,
 } from '~/types/osm';
-import type {
-  AdiffAction,
-  AdiffElement,
-  AdiffNode,
-  AdiffWay,
-  AdiffWayNodeRef,
-  AugmentedDiff,
-} from '~/types/adiff';
+import type { AugmentedDiff } from '~/types/adiff';
 import type { WorkspaceId } from '~/types/workspaces';
 
-const ADIFF_ACTION_TYPES = OSMCHANGE_ACTION_TYPES;
-
 export type OsmChangeCacheKey = { workspaceId: WorkspaceId; changesetId: number };
 export const OsmChangeDb = LruIndexedDbCache<OsmChangeCacheKey, OsmChange>;
 export type AugmentedDiffCacheKey = { workspaceId: WorkspaceId; changesetId: number };
@@ -83,15 +73,18 @@ export class AugmentedDiffCache {
 
 export class ChangesetManager {
   readonly #osmClient: OsmApiClient;
+  readonly #workspacesClient: WorkspacesClient;
   readonly #oscCache: OsmChangeCache;
-  readonly #adiffCache: AugmentedDiffCache; ;
+  readonly #adiffCache: AugmentedDiffCache;
 
   constructor(
     osmClient: OsmApiClient,
+    workspacesClient: WorkspacesClient,
     oscCache: OsmChangeCache,
     adiffCache: AugmentedDiffCache,
   ) {
     this.#osmClient = osmClient;
+    this.#workspacesClient = workspacesClient;
     this.#oscCache = oscCache;
     this.#adiffCache = adiffCache;
 
@@ -142,308 +135,17 @@ export class ChangesetManager {
 
   async getAdiff(workspaceId: WorkspaceId, changeset: OsmChangeset): Promise<AugmentedDiff> {
     if (changeset.open) {
-      // Skip the cache--someone may add more to this changeset:
-      return await this.#buildAdiff(workspaceId, changeset.osmChange);
+      // Skip the cache — open changesets may still receive edits:
+      return await this.#workspacesClient.getChangesetAdiff(workspaceId, changeset.id);
     }
 
     let adiff = await this.#adiffCache.get(workspaceId, changeset.id);
 
     if (!adiff) {
-      adiff = await this.#buildAdiff(workspaceId, changeset.osmChange);
+      adiff = await this.#workspacesClient.getChangesetAdiff(workspaceId, changeset.id);
       await this.#adiffCache.set(workspaceId, changeset.id, adiff);
     }
 
     return adiff;
   }
-
-  async #buildAdiff(workspaceId: WorkspaceId, osmChange: OsmChange): Promise<AugmentedDiff> {
-    const builder = new ChangesetAdiffBuilder(this.#osmClient, workspaceId);
-
-    return await builder.build(osmChange);
-  }
-}
-
-function isNode(element: AdiffElement): element is AdiffNode {
-  return element.type === 'node';
-}
-
-function isWay(element: AdiffElement): element is AdiffWay {
-  return element.type === 'way';
-}
-
-function osmToAdiff(element: OsmElement): AdiffElement {
-  const adiff: AdiffElement = {
-    ...(element as AdiffElement),
-    visible: element.visible ?? true,
-    tags: { ...element.tags },
-  };
-
-  if ('nodes' in adiff && 'nodes' in element) {
-    adiff.nodes = element.nodes?.map(ref => ({ ref, lat: 0, lon: 0 }));
-  }
-
-  return adiff;
-}
-
-function nodeToRef(node: OsmNode): AdiffWayNodeRef {
-  return { ref: node.id, lat: node.lat, lon: node.lon };
-}
-
-function splitIdVersion(idVersion: string): [number, number] {
-  const idVersionParts = idVersion.split('v');
-  const id = Number(idVersionParts[0]);
-  const version = Number(idVersionParts[1]);
-
-  return [id, version];
-}
-
-type OsmElementVersionMap = Map<number, OsmElement>;
-type OsmElementMap = Map<number, OsmElementVersionMap>;
-type OsmTypeMap = {
-  [K in OsmElementType]: {
-    fromChangesetIds: Set<number>;
-    versions: OsmElementMap;
-  }
-};
-
-class AdiffElementCache {
-  readonly #typeMap: OsmTypeMap;
-
-  constructor() {
-    this.#typeMap = {
-      node: { fromChangesetIds: new Set(), versions: new Map() },
-      way: { fromChangesetIds: new Set(), versions: new Map() },
-      relation: { fromChangesetIds: new Set(), versions: new Map() },
-    };
-  }
-
-  remember(element: OsmElement, fromChangeset: boolean = false) {
-    this.getVersions(element.type, element.id).set(element.version, element);
-
-    if (fromChangeset) {
-      this.#typeMap[element.type].fromChangesetIds.add(element.id);
-    }
-  }
-
-  getVersions(type: OsmElementType, id: number): OsmElementVersionMap {
-    let versionMap = this.#typeMap[type].versions.get(id);
-
-    if (!versionMap) {
-      versionMap = new Map();
-      this.#typeMap[type].versions.set(id, versionMap);
-    }
-
-    return versionMap;
-  }
-
-  getVersion<T extends OsmElement>(
-    type: T['type'],
-    id: number,
-    version: number,
-  ): T | undefined {
-    return this.#typeMap[type].versions.get(id)?.get(version) as T;
-  }
-
-  getLatestVersion<T extends OsmElement>(type: T['type'], id: number): T | undefined {
-    const versionMap = this.#typeMap[type].versions.get(id);
-
-    if (!versionMap) {
-      return undefined;
-    }
-
-    return versionMap.get(Math.max(...versionMap.keys())) as T;
-  }
-
-  isInChangeset(type: OsmElementType, id: number): boolean {
-    return this.#typeMap[type].fromChangesetIds.has(id);
-  }
-}
-
-class ChangesetAdiffBuilder {
-  readonly #osmClient: OsmApiClient;
-  readonly #workspaceId: WorkspaceId;
-  readonly #cache: AdiffElementCache;
-  readonly #actions: AdiffAction[];
-
-  constructor(osmClient: OsmApiClient, workspaceId: WorkspaceId) {
-    this.#osmClient = osmClient;
-    this.#workspaceId = workspaceId;
-    this.#cache = new AdiffElementCache();
-    this.#actions = [];
-  }
-
-  async build(osmChange: OsmChange): Promise<AugmentedDiff> {
-    const actions: AdiffAction[] = [];
-    const promises = [];
-
-    for (const type of ADIFF_ACTION_TYPES) {
-      for (const element of osmChange[type] ?? []) {
-        actions.push({ type, old: undefined, new: osmToAdiff(element) });
-        this.#cache.remember(element, true);
-      }
-    }
-
-    for (const action of actions) {
-      this.#actions.push(action);
-
-      if (action.type !== 'create') {
-        promises.push(
-          this.#getPreviousElement(action.new).then(e => action.old = e),
-        );
-      }
-
-      promises.push(this.#expandReferences(action));
-    }
-
-    await Promise.all(promises);
-
-    return { actions: this.#actions };
-  }
-
-  #expandReferences(action: AdiffAction): Promise<void> {
-    if (isNode(action.new)) {
-      return this.#expandNodeReferences(action.new);
-    }
-
-    return this.#expandWayReferences(action.new);
-  }
-
-  async #expandNodeReferences(node: AdiffNode): Promise<void> {
-    const ways = await this.#fetchWays(node);
-
-    for (const way of ways) {
-      if (this.#cache.isInChangeset('way', way.id)) {
-        continue;
-      }
-
-      const old = { ...way, nodes: [...way.nodes ?? []], tags: { ...way.tags } };
-      const action: AdiffAction = { type: 'modify', old, new: way };
-
-      while (action.old && action.old.changeset > node.changeset) {
-        action.old = await this.#getPreviousElement(action.old);
-      }
-
-      if (action.old === old) {
-        await this.#resolveWayNodes(old, old.changeset);
-      }
-
-      this.#actions.push(action);
-    }
-  }
-
-  async #expandWayReferences(way: AdiffWay): Promise<void> {
-    await this.#resolveWayNodes(way, way.changeset);
-  }
-
-  async #resolveWayNodes(element: AdiffWay, changesetId: number) {
-    const resolvedNodes: AdiffWayNodeRef[] = [];
-    let nodeIds: (string | number)[] = element.nodes?.map(r => r.ref) ?? [];
-
-    while (nodeIds.length > 0) {
-      const refs = await this.#fetchNodes(nodeIds);
-      nodeIds = [];
-
-      for (const node of refs) {
-        if (node.changeset <= changesetId) {
-          resolvedNodes.push(nodeToRef(node));
-        }
-        else {
-          nodeIds.push(`${node.id}v${node.version - 1}`);
-        }
-      }
-    }
-
-    element.nodes = resolvedNodes;
-  }
-
-  async #fetchNodes(nodeIds: (string | number)[]): Promise<OsmNode[]> {
-    const refs: OsmNode[] = [];
-    const pendingIds = [];
-
-    for (const nodeId of nodeIds) {
-      if (Number.isFinite(nodeId)) {
-        const node = this.#cache.getLatestVersion<OsmNode>('node', nodeId as number);
-
-        if (node) {
-          refs.push(node);
-        }
-        else {
-          pendingIds.push(nodeId);
-        }
-      }
-      else {
-        const [id, version] = splitIdVersion(nodeId as string);
-        const node = this.#cache.getVersion<OsmNode>('node', id, version);
-
-        if (node) {
-          refs.push(node);
-        }
-        else {
-          pendingIds.push(nodeId);
-        }
-      }
-    }
-
-    if (pendingIds.length > 0) {
-      const nodes = await this.#osmClient.getNodes(this.#workspaceId, pendingIds);
-
-      for (const node of nodes) {
-        refs.push(node);
-        this.#cache.remember(node);
-      }
-    }
-
-    return refs;
-  }
-
-  async #fetchWays(node: AdiffElement): Promise<AdiffWay[]> {
-    let ways = await this.#osmClient.getWaysForNode(this.#workspaceId, node.id);
-    const resolvedWays = [];
-
-    while (ways.length > 0) {
-      const pendingWayIds = [];
-
-      for (const way of ways) {
-        if (way.changeset <= node.changeset) {
-          const adiffWay = osmToAdiff(way) as AdiffWay;
-          await this.#resolveWayNodes(adiffWay, node.changeset);
-          resolvedWays.push(adiffWay);
-        }
-        else {
-          pendingWayIds.push(`${way.id}v${way.version - 1}`);
-        }
-      }
-
-      if (pendingWayIds.length > 0) {
-        ways = await this.#osmClient.getWays(this.#workspaceId, pendingWayIds);
-      }
-      else {
-        ways.length = 0;
-      }
-    }
-
-    return resolvedWays;
-  }
-
-  async #getPreviousElement(element: AdiffElement): Promise<AdiffElement> {
-    const version = element.version - 1;
-    let prevElement = this.#cache.getVersion(element.type, element.id, version);
-
-    if (!prevElement) {
-      prevElement = await this.#osmClient.getElement(
-        this.#workspaceId,
-        element.type,
-        element.id,
-        version);
-      this.#cache.remember(prevElement);
-    }
-
-    const adiffElement = osmToAdiff(prevElement);
-
-    if (isWay(adiffElement)) {
-      await this.#resolveWayNodes(adiffElement, element.changeset - 1);
-    }
-
-    return adiffElement;
-  }
 }
diff --git a/services/index.ts b/services/index.ts
index 2d18714..7d1d300 100644
--- a/services/index.ts
+++ b/services/index.ts
@@ -42,6 +42,7 @@ const adiffCacheDb = new AugmentedDiffDb('adiff-cache', adiffCacheTtl, adiffKeyp
 
 export const changesetManager = new ChangesetManager(
   osmClient,
+  workspacesClient,
   new OsmChangeCache(oscCacheDb),
   new AugmentedDiffCache(adiffCacheDb));
 export const reviewManager = new ReviewManager(
diff --git a/services/workspaces.ts b/services/workspaces.ts
index 4b6d4a4..3a906d1 100644
--- a/services/workspaces.ts
+++ b/services/workspaces.ts
@@ -10,6 +10,7 @@ import { compareStringAsc } from '~/util/compare';
 import type { ICancelableClient } from '~/services/loading';
 import type { OsmApiClient } from '~/services/osm';
 import type { TdeiAuthStore, TdeiClient } from '~/services/tdei';
+import type { AugmentedDiff } from '~/types/adiff';
 import type { BoundingBox } from '~/types/bbox';
 import type { ImagerySettings } from '~/types/imagery';
 import type {
@@ -238,6 +239,12 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     await this.#newApi._put(`workspaces/${workspaceId}/changesets/${changesetId}/resolve`);
   }
 
+  async getChangesetAdiff(workspaceId: WorkspaceId, changesetId: number): Promise<AugmentedDiff> {
+    const response = await this.#newApi._get(`workspaces/${workspaceId}/changesets/${changesetId}/adiff`);
+
+    return await response.json();
+  }
+
   #setAuthHeader() {
     if (this.#tdeiClient.auth.complete) {
       this._requestHeaders.Authorization = 'Bearer ' + this.auth.accessToken;

From 8c72c3176b9d23d6fcc62f821d363164e4f3810b Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 4 Jun 2026 09:02:54 -0700
Subject: [PATCH 08/11] Add KartaView image viewer to review queue

---
 components/review/FeatureImage.vue | 178 +++++++++++++++++++++++++++++
 pages/workspace/[id]/review.vue    |  10 ++
 util/kartaview.ts                  |  20 ++++
 3 files changed, 208 insertions(+)
 create mode 100644 components/review/FeatureImage.vue
 create mode 100644 util/kartaview.ts

diff --git a/components/review/FeatureImage.vue b/components/review/FeatureImage.vue
new file mode 100644
index 0000000..58cc9b5
--- /dev/null
+++ b/components/review/FeatureImage.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="feature-image">
+    <!-- Thumbnail panel -->
+    <div class="feature-image__panel">
+      <button
+        class="feature-image__thumb-btn"
+        :disabled="error || !loaded"
+        :title="error ? undefined : 'Click to enlarge'"
+        @click="openLightbox"
+      >
+        <app-spinner v-if="!loaded && !error" />
+        <img
+          v-show="loaded && !error"
+          :src="props.imageUrl"
+          class="feature-image__thumb"
+          alt="Photo submitted with the quest"
+          @load="onLoad"
+          @error="onError"
+        >
+
+        <span
+          v-if="error"
+          class="feature-image__error"
+        >
+          <app-icon variant="broken_image" />
+          Image unavailable
+        </span>
+      </button>
+
+      <div class="feature-image__caption">
+        <a
+          :href="props.imageUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="feature-image__link"
+        >
+          KartaView
+          <app-icon variant="open_in_new" />
+        </a>
+      </div>
+    </div>
+
+    <!-- Lightbox modal -->
+    <b-modal
+      v-model="showLightbox"
+      title="KartaView image"
+      size="xl"
+      centered
+      ok-only
+      ok-title="Close"
+      ok-variant="secondary"
+      body-class="p-1"
+    >
+      <img
+        :src="lightboxSrc"
+        class="feature-image__full"
+        alt="Photo submitted with the quest"
+        @error="onLightboxError"
+      >
+    </b-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BModal } from 'bootstrap-vue-next/components/BModal';
+import { kartaViewFullResUrl } from '~/util/kartaview';
+
+interface Props {
+  imageUrl: string;
+}
+
+const props = defineProps<Props>();
+
+const loaded = ref(false);
+const error = ref(false);
+const showLightbox = ref(false);
+const lightboxSrc = ref('');
+
+watch(() => props.imageUrl, () => {
+  loaded.value = false;
+  error.value = false;
+  showLightbox.value = false;
+  lightboxSrc.value = '';
+});
+
+function onLoad() {
+  loaded.value = true;
+}
+
+function onError() {
+  error.value = true;
+}
+
+function openLightbox() {
+  lightboxSrc.value = kartaViewFullResUrl(props.imageUrl);
+  showLightbox.value = true;
+}
+
+function onLightboxError() {
+  // Full-res URL failed — fall back to the working thumbnail URL
+  if (lightboxSrc.value !== props.imageUrl) {
+    lightboxSrc.value = props.imageUrl;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "assets/scss/theme.scss";
+
+.feature-image {
+  position: absolute;
+  bottom: 2rem;
+  left: 0.6rem;
+
+  &__panel {
+    background: $body-bg;
+    box-shadow: $box-shadow;
+    border-radius: $border-radius;
+    overflow: hidden;
+  }
+
+  &__thumb-btn {
+    display: block;
+    width: 10rem;
+    min-height: 4rem;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    line-height: 0;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  &__thumb {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  &__spinner,
+  &__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 4rem;
+    padding: 0.5rem;
+    gap: 0.25rem;
+    font-size: 0.8em;
+    color: $secondary;
+    line-height: 1.2;
+  }
+
+  &__caption {
+    padding: 0.2rem 0.5rem;
+    text-align: right;
+    font-size: 0.75em;
+  }
+
+  &__link {
+    color: $secondary;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__full {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+}
+</style>
diff --git a/pages/workspace/[id]/review.vue b/pages/workspace/[id]/review.vue
index eb95d18..81b72b0 100644
--- a/pages/workspace/[id]/review.vue
+++ b/pages/workspace/[id]/review.vue
@@ -48,6 +48,10 @@
         :dataset-type="reviewList.workspace.type"
         :diff="currentDiff"
       />
+      <review-feature-image
+        v-if="currentImageUrl"
+        :image-url="currentImageUrl"
+      />
     </section>
   </section>
 </template>
@@ -55,6 +59,7 @@
 <script setup lang="ts">
 import { toast } from 'vue3-toastify';
 import { reviewManager, workspacesClient } from '~/services/index';
+import { kartaViewImageUrl } from '~/util/kartaview';
 
 import type ReviewMap from '~/components/review/Map.vue';
 import type { ReviewListItem } from '~/services/review.ts';
@@ -77,6 +82,11 @@ const loadingMap = ref(false);
 const currentItem = ref<ReviewListItem | undefined>();
 const currentDiff = ref<AdiffAction | undefined>();
 
+const currentImageUrl = computed(() =>
+  kartaViewImageUrl(currentDiff.value?.new?.tags) ??
+  kartaViewImageUrl(currentDiff.value?.old?.tags)
+);
+
 refresh();
 
 watch(currentItem, () => {
diff --git a/util/kartaview.ts b/util/kartaview.ts
new file mode 100644
index 0000000..c00fead
--- /dev/null
+++ b/util/kartaview.ts
@@ -0,0 +1,20 @@
+import type { OsmTags } from '~/types/osm';
+
+export const KARTAVIEW_URL_TAG = 'ext:kartaview_url';
+
+/**
+ * Extracts a KartaView image URL from an element's tags if present.
+ */
+export function kartaViewImageUrl(tags: OsmTags | undefined): string | undefined {
+  const value = tags?.[KARTAVIEW_URL_TAG]?.trim();
+  return value || undefined;
+}
+
+/**
+ * Upgrades a KartaView large-thumbnail URL to the full-resolution processed version.
+ * KartaView stores thumbnails at .../lth/... and full-res at .../proc/...
+ * Returns the original URL unchanged if the /lth/ segment is not present.
+ */
+export function kartaViewFullResUrl(url: string): string {
+  return url.replace('/lth/', '/proc/');
+}

From 0b72b4a91718a79869d61918824e8b0c05e3379a Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 4 Jun 2026 12:03:07 -0700
Subject: [PATCH 09/11] Workaround existing legacy KartaView URLs

---
 pages/workspace/[id]/review.vue | 11 ++++++-----
 util/kartaview.ts               | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/pages/workspace/[id]/review.vue b/pages/workspace/[id]/review.vue
index 81b72b0..b5ccb69 100644
--- a/pages/workspace/[id]/review.vue
+++ b/pages/workspace/[id]/review.vue
@@ -59,7 +59,7 @@
 <script setup lang="ts">
 import { toast } from 'vue3-toastify';
 import { reviewManager, workspacesClient } from '~/services/index';
-import { kartaViewImageUrl } from '~/util/kartaview';
+import { kartaViewImageUrl, convertKartaViewUrl } from '~/util/kartaview';
 
 import type ReviewMap from '~/components/review/Map.vue';
 import type { ReviewListItem } from '~/services/review.ts';
@@ -82,10 +82,11 @@ const loadingMap = ref(false);
 const currentItem = ref<ReviewListItem | undefined>();
 const currentDiff = ref<AdiffAction | undefined>();
 
-const currentImageUrl = computed(() =>
-  kartaViewImageUrl(currentDiff.value?.new?.tags) ??
-  kartaViewImageUrl(currentDiff.value?.old?.tags)
-);
+const currentImageUrl = computed(() => {
+  const raw = kartaViewImageUrl(currentDiff.value?.new?.tags)
+    ?? kartaViewImageUrl(currentDiff.value?.old?.tags);
+  return raw ? convertKartaViewUrl(raw) : undefined;
+});
 
 refresh();
 
diff --git a/util/kartaview.ts b/util/kartaview.ts
index c00fead..49981ce 100644
--- a/util/kartaview.ts
+++ b/util/kartaview.ts
@@ -1,6 +1,7 @@
 import type { OsmTags } from '~/types/osm';
 
 export const KARTAVIEW_URL_TAG = 'ext:kartaview_url';
+const KARTAVIEW_CDN_PREFIX = 'https://cdn.kartaview.org/pr:sharp/';
 
 /**
  * Extracts a KartaView image URL from an element's tags if present.
@@ -11,10 +12,16 @@ export function kartaViewImageUrl(tags: OsmTags | undefined): string | undefined
 }
 
 /**
- * Upgrades a KartaView large-thumbnail URL to the full-resolution processed version.
- * KartaView stores thumbnails at .../lth/... and full-res at .../proc/...
- * Returns the original URL unchanged if the /lth/ segment is not present.
+ * Converts a legacy KartaView/OpenStreetCam storage URL to the new CDN-proxied
+ * form. Returns CDN URLs already in the new form unchanged.
  */
-export function kartaViewFullResUrl(url: string): string {
-  return url.replace('/lth/', '/proc/');
+export function convertKartaViewUrl(url: string): string {
+  if (url.startsWith(KARTAVIEW_CDN_PREFIX)) {
+    return url;
+  }
+  const cleanUrl = url.trim();
+  const bytes = new TextEncoder().encode(cleanUrl);
+  const binaryStr = Array.from(bytes, b => String.fromCharCode(b)).join('');
+  const base64 = btoa(binaryStr).replace(/=+$/, '');
+  return `${KARTAVIEW_CDN_PREFIX}${base64}`;
 }

From 7447e92b791772a6642a579e088cae480ae9205a Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 4 Jun 2026 16:00:17 -0700
Subject: [PATCH 10/11] Improve mobile usability of review queue

---
 components/review/AttributeDiff.vue | 56 ++++++++++++++++++-
 components/review/FeatureImage.vue  | 85 ++++++++++++-----------------
 components/review/Map.vue           | 10 ++++
 components/review/Overlay.vue       |  5 +-
 components/review/Sidebar.vue       | 11 ++++
 components/review/Toolbar.vue       | 33 +++++++++--
 pages/workspace/[id]/review.vue     | 77 +++++++++++++++++++++++++-
 7 files changed, 220 insertions(+), 57 deletions(-)

diff --git a/components/review/AttributeDiff.vue b/components/review/AttributeDiff.vue
index 41d7d1c..c5b1a7b 100644
--- a/components/review/AttributeDiff.vue
+++ b/components/review/AttributeDiff.vue
@@ -1,7 +1,26 @@
 <template>
   <section class="diff-attributes">
+    <!--
+    For small screens, display a button to view the photo submission. Otherwise
+    we'll display a thumbnail as a separate component (FeatureImage.vue).
+    -->
+    <div
+      v-if="props.imageUrl"
+      class="d-lg-none"
+    >
+      <button
+        class="diff-attributes__photo-btn"
+        type="button"
+        @click="emit('open-photo')"
+      >
+        <app-icon variant="photo_camera" />
+        <span class="diff-attributes__photo-label">View photo submission</span>
+      </button>
+    </div>
+
     <header>
-      <app-icon :variant="elementIcon" />{{ elementType }}
+      <app-icon :variant="elementIcon" />
+      {{ elementType }}
       <strong>#{{ elementId }}</strong>
       {{ elementAction }} by
       <strong>{{ props.diff.new.user }}</strong>
@@ -144,9 +163,11 @@ class TagMap {
 interface Props {
   datasetType: WorkspaceType;
   diff: AdiffAction;
+  imageUrl?: string;
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits(['open-photo']);
 
 const elementId = computed(() => props.diff.new?.id ?? props.diff.old?.id);
 const elementType = computed(() => {
@@ -218,6 +239,13 @@ function tagClass(vals: TagMapItem) {
   overflow: hidden;
   font-size: 0.875em;
 
+  @include media-breakpoint-down(md) {
+    & {
+      min-width: 0;
+      max-width: calc(100vw - 1.2rem);
+    }
+  }
+
   > * {
     background: var(--bs-body-bg);
     box-shadow: var(--bs-box-shadow);
@@ -225,6 +253,32 @@ function tagClass(vals: TagMapItem) {
     margin-bottom: 0.5rem;
   }
 
+  &__photo-btn {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: none;
+    border: none;
+    padding: 0.5em;
+    gap: 0.25em;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover .diff-attributes__photo-label {
+      color: var(--bs-link-hover-color);
+    }
+
+    i {
+      margin-top: 0;
+    }
+  }
+
+  &__photo-label {
+    color: var(--bs-link-color);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
   header {
     padding: 0.25em 0.5em;
   }
diff --git a/components/review/FeatureImage.vue b/components/review/FeatureImage.vue
index 58cc9b5..a037636 100644
--- a/components/review/FeatureImage.vue
+++ b/components/review/FeatureImage.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="feature-image">
-    <!-- Thumbnail panel -->
     <div class="feature-image__panel">
       <button
+        v-show="!minimized"
         class="feature-image__thumb-btn"
         :disabled="error || !loaded"
         :title="error ? undefined : 'Click to enlarge'"
-        @click="openLightbox"
+        @click="emit('open')"
       >
         <app-spinner v-if="!loaded && !error" />
         <img
@@ -17,7 +17,6 @@
           @load="onLoad"
           @error="onError"
         >
-
         <span
           v-if="error"
           class="feature-image__error"
@@ -28,6 +27,13 @@
       </button>
 
       <div class="feature-image__caption">
+        <button
+          class="feature-image__toggle"
+          :title="minimized ? 'Expand' : 'Minimize'"
+          @click="minimized = !minimized"
+        >
+          <app-icon :variant="minimized ? 'add' : 'remove'" />
+        </button>
         <a
           :href="props.imageUrl"
           target="_blank"
@@ -39,48 +45,25 @@
         </a>
       </div>
     </div>
-
-    <!-- Lightbox modal -->
-    <b-modal
-      v-model="showLightbox"
-      title="KartaView image"
-      size="xl"
-      centered
-      ok-only
-      ok-title="Close"
-      ok-variant="secondary"
-      body-class="p-1"
-    >
-      <img
-        :src="lightboxSrc"
-        class="feature-image__full"
-        alt="Photo submitted with the quest"
-        @error="onLightboxError"
-      >
-    </b-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { BModal } from 'bootstrap-vue-next/components/BModal';
-import { kartaViewFullResUrl } from '~/util/kartaview';
-
 interface Props {
   imageUrl: string;
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits(['open']);
 
 const loaded = ref(false);
 const error = ref(false);
-const showLightbox = ref(false);
-const lightboxSrc = ref('');
+const minimized = ref(false);
 
 watch(() => props.imageUrl, () => {
   loaded.value = false;
   error.value = false;
-  showLightbox.value = false;
-  lightboxSrc.value = '';
+  minimized.value = false;
 });
 
 function onLoad() {
@@ -90,18 +73,6 @@ function onLoad() {
 function onError() {
   error.value = true;
 }
-
-function openLightbox() {
-  lightboxSrc.value = kartaViewFullResUrl(props.imageUrl);
-  showLightbox.value = true;
-}
-
-function onLightboxError() {
-  // Full-res URL failed — fall back to the working thumbnail URL
-  if (lightboxSrc.value !== props.imageUrl) {
-    lightboxSrc.value = props.imageUrl;
-  }
-}
 </script>
 
 <style scoped lang="scss">
@@ -112,6 +83,10 @@ function onLightboxError() {
   bottom: 2rem;
   left: 0.6rem;
 
+  @include media-breakpoint-down(lg) {
+    & { display: none; }
+  }
+
   &__panel {
     background: $body-bg;
     box-shadow: $box-shadow;
@@ -140,7 +115,6 @@ function onLightboxError() {
     display: block;
   }
 
-  &__spinner,
   &__error {
     display: flex;
     align-items: center;
@@ -155,11 +129,30 @@ function onLightboxError() {
   }
 
   &__caption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding: 0.2rem 0.5rem;
-    text-align: right;
     font-size: 0.75em;
   }
 
+  &__toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: $secondary;
+    line-height: 1;
+
+    &:hover {
+      color: $body-color;
+    }
+
+    i {
+      margin-top: 0;
+    }
+  }
+
   &__link {
     color: $secondary;
     text-decoration: none;
@@ -168,11 +161,5 @@ function onLightboxError() {
       text-decoration: underline;
     }
   }
-
-  &__full {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
 }
 </style>
diff --git a/components/review/Map.vue b/components/review/Map.vue
index 770e0fa..37868a7 100644
--- a/components/review/Map.vue
+++ b/components/review/Map.vue
@@ -81,10 +81,17 @@ const mapRef = useTemplateRef<HTMLDivElement>('map');
 let reviewMap: maplibregl.Map;
 let adiffViewer: typeof MapLibreAugmentedDiffViewer;
 let popup: maplibregl.Popup;
+let resizeObserver: ResizeObserver | undefined;
 
 onMounted(() => {
   initMap();
 });
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  reviewMap?.remove();
+});
+
 watch(() => props.item, drawItem);
 
 function initMap() {
@@ -97,6 +104,9 @@ function initMap() {
       container: mapRef.value,
       style: reviewMapStyle,
     });
+
+    resizeObserver = new ResizeObserver(() => reviewMap?.resize());
+    resizeObserver.observe(mapRef.value);
   }
 }
 
diff --git a/components/review/Overlay.vue b/components/review/Overlay.vue
index 435e301..e840c0f 100644
--- a/components/review/Overlay.vue
+++ b/components/review/Overlay.vue
@@ -6,6 +6,7 @@
       :item="item"
       @edit="props.onEdit"
       @resolve="$emit('resolve')"
+      @back="emit('back')"
     />
 
     <div class="review-overlay-panels">
@@ -30,7 +31,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-defineEmits(['resolve']);
+const emit = defineEmits(['back', 'resolve']);
 
 const showDetails = ref(false);
 const showDiscussion = ref(false);
@@ -48,7 +49,7 @@ watch(() => props.item, () => {
   position: absolute;
   top: 1rem;
   left: 1rem;
-  margin-right: 1rem;
+  max-width: calc(100vw - 2rem);
 
   .review-overlay-panels {
     max-height: calc(100vh - $navbar-height - 6rem);
diff --git a/components/review/Sidebar.vue b/components/review/Sidebar.vue
index 958d619..b4ecf7a 100644
--- a/components/review/Sidebar.vue
+++ b/components/review/Sidebar.vue
@@ -96,6 +96,8 @@ function refresh() {
 </script>
 
 <style lang="scss">
+@import "assets/scss/theme.scss";
+
 .review-sidebar {
   display: flex;
   flex-direction: column;
@@ -146,5 +148,14 @@ function refresh() {
     border-top: 0;
     border-radius: 0;
   }
+
+  @include media-breakpoint-down(md) {
+    & {
+      flex-basis: auto;
+      min-width: 0;
+      max-width: none;
+      width: 100%;
+    }
+  }
 }
 </style>
diff --git a/components/review/Toolbar.vue b/components/review/Toolbar.vue
index b05be25..48b80b0 100644
--- a/components/review/Toolbar.vue
+++ b/components/review/Toolbar.vue
@@ -1,8 +1,21 @@
 <template>
   <nav class="review-toolbar">
-    <span class="border-end pe-3 me-3 text-uppercase ">
-      <span class="fw-bold">{{ props.item.displayType }}:</span>
-      #{{ props.item.id }}
+    <button
+      class="btn btn-sm btn-light border me-3 d-md-none"
+      type="button"
+      title="Back to list"
+      @click="emit('back')"
+    >
+      <app-icon
+        variant="arrow_back"
+        no-margin
+      />
+    </button>
+    <span class="border-end pe-3 me-3">
+      <app-icon
+        :variant="props.item.badgeIcon"
+        :class="typeClass"
+      /><span class="d-none d-sm-inline fw-bold text-uppercase me-1">{{ props.item.displayType }}:</span>#{{ props.item.id }}
     </span>
     <button
       class="btn btn-sm btn-primary"
@@ -99,9 +112,12 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits(['back', 'edit', 'resolve']);
+
 const { isValidator } = useWorkspaceRole();
 
-const emit = defineEmits(['edit', 'resolve']);
+const typeClass = computed(() => props.item.badgeClass.replace('bg-', 'text-'));
+
 const showDetails = defineModel<boolean>('showDetails');
 const showDiscussion = defineModel<boolean>('showDiscussion');
 
@@ -123,12 +139,21 @@ function toggleDiscussion() {
 </script>
 
 <style lang="scss">
+@import "assets/scss/theme.scss";
+
 .review-toolbar {
+  display: flex;
+  align-items: center;
   background-color: var(--bs-body-bg);
   border-radius: var(--bs-border-radius);
   padding: 1rem;
   margin-bottom: 0.5rem;
   white-space: nowrap;
   box-shadow: var(--bs-box-shadow-lg);
+  overflow-x: auto;
+
+  @include media-breakpoint-down(sm) {
+    & { padding: 0.5rem; }
+  }
 }
 </style>
diff --git a/pages/workspace/[id]/review.vue b/pages/workspace/[id]/review.vue
index b5ccb69..a2f13c8 100644
--- a/pages/workspace/[id]/review.vue
+++ b/pages/workspace/[id]/review.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     class="review-page"
-    fluid
+    :class="{ 'detail-open': currentItem }"
   >
     <review-sidebar
       v-model:item="currentItem"
@@ -42,22 +42,53 @@
         :item="currentItem"
         @edit="openEditor"
         @resolve="resolveCurrentChangeset"
+        @back="currentItem = undefined"
       />
       <review-attribute-diff
         v-if="currentDiff && reviewList.workspace"
         :dataset-type="reviewList.workspace.type"
         :diff="currentDiff"
+        :image-url="currentImageUrl"
+        @open-photo="showLightbox = true"
       />
       <review-feature-image
         v-if="currentImageUrl"
         :image-url="currentImageUrl"
+        @open="showLightbox = true"
       />
+      <b-modal
+        v-if="currentImageUrl"
+        v-model="showLightbox"
+        size="xl"
+        centered
+        no-header
+        no-footer
+        body-class="p-0 lightbox-body"
+      >
+        <button
+          class="lightbox-close"
+          aria-label="Close"
+          @click="showLightbox = false"
+        >
+          <app-icon
+            variant="close"
+            no-margin
+          />
+        </button>
+        <img
+          :src="currentImageUrl"
+          style="width: 100%; height: auto; display: block"
+          alt="Photo submitted with the quest"
+        >
+      </b-modal>
     </section>
   </section>
 </template>
 
 <script setup lang="ts">
+import { BModal } from 'bootstrap-vue-next/components/BModal';
 import { toast } from 'vue3-toastify';
+
 import { reviewManager, workspacesClient } from '~/services/index';
 import { kartaViewImageUrl, convertKartaViewUrl } from '~/util/kartaview';
 
@@ -81,6 +112,7 @@ const loading = ref(false);
 const loadingMap = ref(false);
 const currentItem = ref<ReviewListItem | undefined>();
 const currentDiff = ref<AdiffAction | undefined>();
+const showLightbox = ref(false);
 
 const currentImageUrl = computed(() => {
   const raw = kartaViewImageUrl(currentDiff.value?.new?.tags)
@@ -94,6 +126,10 @@ watch(currentItem, () => {
   currentDiff.value = undefined;
 });
 
+watch(currentDiff, () => {
+  showLightbox.value = false;
+});
+
 async function refresh() {
   if (loading.value) {
     return;
@@ -148,6 +184,8 @@ async function openEditor() {
 </script>
 
 <style lang="scss">
+@import "assets/scss/theme.scss";
+
 .review-page {
   display: flex;
   height: 100%;
@@ -174,5 +212,42 @@ async function openEditor() {
   .review-notice {
     background-color: var(--bs-body-bg);
   }
+
+  @include media-breakpoint-down(md) {
+    & {
+      .map-container { display: none; }
+    }
+
+    &.detail-open {
+      .review-sidebar { display: none; }
+      .map-container { display: block; }
+    }
+  }
+}
+
+.lightbox-body {
+  position: relative;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.75);
+  }
 }
 </style>

From f92bcf302f27012aff2165e992cc08d1a1a1b98e Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 4 Jun 2026 22:47:44 -0700
Subject: [PATCH 11/11] Replace Bootstrap modal lightbox with v-viewer

---
 components/AppImageViewer.vue   | 38 ++++++++++++++++++
 nuxt.config.ts                  |  1 +
 package-lock.json               | 29 +++++++++++++-
 package.json                    |  1 +
 pages/workspace/[id]/review.vue | 71 ++++++---------------------------
 plugins/v-viewer.client.ts      |  6 +++
 6 files changed, 87 insertions(+), 59 deletions(-)
 create mode 100644 components/AppImageViewer.vue
 create mode 100644 plugins/v-viewer.client.ts

diff --git a/components/AppImageViewer.vue b/components/AppImageViewer.vue
new file mode 100644
index 0000000..1b9c50b
--- /dev/null
+++ b/components/AppImageViewer.vue
@@ -0,0 +1,38 @@
+<!--
+Wrapper around v-viewer.
+-->
+<script setup lang="ts">
+import { api as viewerApi } from 'v-viewer';
+
+interface Props {
+  // Label shown below the image. Omit to hide the title bar entirely.
+  title?: string;
+}
+
+const props = defineProps<Props>();
+
+const viewerOptions = computed(() => ({
+  navbar: false,
+  zoomRatio: 0.3,
+  title: props.title ? () => props.title : false,
+  toolbar: {
+    zoomIn: true,
+    zoomOut: true,
+    oneToOne: false,
+    reset: false,
+    prev: false,
+    play: false,
+    next: false,
+    rotateLeft: true,
+    rotateRight: true,
+    flipHorizontal: false,
+    flipVertical: false,
+  },
+}));
+
+function show(imageUrl: string) {
+  viewerApi({ images: [imageUrl], options: viewerOptions.value });
+}
+
+defineExpose({ show });
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5dc3243..0cc5a36 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -97,6 +97,7 @@ export default defineNuxtConfig({
         'dayjs/plugin/relativeTime', // CJS
         'maplibre-gl', // CJS
         'papaparse', // CJS
+        'v-viewer',
         'vue-qrcode',
         'vue3-toastify',
       ],
diff --git a/package-lock.json b/package-lock.json
index ce96c60..f622744 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "nuxt": "^4.4.8",
         "papaparse": "^5.5.1",
         "qrcode": "^1.5.4",
+        "v-viewer": "^3.0.23",
         "vue": "^3.5.34",
         "vue-qrcode": "^2.2.2",
         "vue-router": "^4.2.5",
@@ -7174,7 +7175,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/cac/-/cac-7.0.0.tgz",
       "integrity": "sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=20.19.0"
@@ -10754,6 +10755,12 @@
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -15376,6 +15383,26 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/v-viewer": {
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-3.0.23.tgz",
+      "integrity": "sha512-u/Zd/FXTdtdE2k2YeYMf6mU4oL0ILEZ9STHnZT7myyfRwQot68GO3O+6DwxNnHTaATiiAJTrz2MXjaqYKoB7iA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.23",
+        "viewerjs": "^1.11.6"
+      },
+      "peerDependencies": {
+        "viewerjs": "^1.11.0",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/viewerjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.7.tgz",
+      "integrity": "sha512-0JuVqOmL5v1jmEAlG5EBDR3XquxY8DWFQbFMprOXgaBB0F7Q/X9xWdEaQc59D8xzwkdUgXEMSSknTpriq95igg==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz",
diff --git a/package.json b/package.json
index 2803960..341d471 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "nuxt": "^4.4.8",
     "papaparse": "^5.5.1",
     "qrcode": "^1.5.4",
+    "v-viewer": "^3.0.23",
     "vue": "^3.5.34",
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.2.5",
diff --git a/pages/workspace/[id]/review.vue b/pages/workspace/[id]/review.vue
index a2f13c8..0cd13ca 100644
--- a/pages/workspace/[id]/review.vue
+++ b/pages/workspace/[id]/review.vue
@@ -49,50 +49,29 @@
         :dataset-type="reviewList.workspace.type"
         :diff="currentDiff"
         :image-url="currentImageUrl"
-        @open-photo="showLightbox = true"
+        @open-photo="showImage"
       />
       <review-feature-image
         v-if="currentImageUrl"
         :image-url="currentImageUrl"
-        @open="showLightbox = true"
+        @open="showImage"
+      />
+      <app-image-viewer
+        ref="imageViewer"
+        title="Photo Submission"
       />
-      <b-modal
-        v-if="currentImageUrl"
-        v-model="showLightbox"
-        size="xl"
-        centered
-        no-header
-        no-footer
-        body-class="p-0 lightbox-body"
-      >
-        <button
-          class="lightbox-close"
-          aria-label="Close"
-          @click="showLightbox = false"
-        >
-          <app-icon
-            variant="close"
-            no-margin
-          />
-        </button>
-        <img
-          :src="currentImageUrl"
-          style="width: 100%; height: auto; display: block"
-          alt="Photo submitted with the quest"
-        >
-      </b-modal>
     </section>
   </section>
 </template>
 
 <script setup lang="ts">
-import { BModal } from 'bootstrap-vue-next/components/BModal';
 import { toast } from 'vue3-toastify';
 
 import { reviewManager, workspacesClient } from '~/services/index';
 import { kartaViewImageUrl, convertKartaViewUrl } from '~/util/kartaview';
 
 import type ReviewMap from '~/components/review/Map.vue';
+import type AppImageViewer from '~/components/AppImageViewer.vue';
 import type { ReviewListItem } from '~/services/review.ts';
 import type { AdiffAction } from '~/types/adiff';
 import type { OsmChangeset } from '~/types/osm';
@@ -107,12 +86,12 @@ const reviewList = reviewManager.getList(workspaceId);
 const filter = reactive(reviewManager.getFilter());
 
 const map = useTemplateRef<InstanceType<typeof ReviewMap>>('map');
+const imageViewer = useTemplateRef<InstanceType<typeof AppImageViewer>>('imageViewer');
 
 const loading = ref(false);
 const loadingMap = ref(false);
 const currentItem = ref<ReviewListItem | undefined>();
 const currentDiff = ref<AdiffAction | undefined>();
-const showLightbox = ref(false);
 
 const currentImageUrl = computed(() => {
   const raw = kartaViewImageUrl(currentDiff.value?.new?.tags)
@@ -126,9 +105,11 @@ watch(currentItem, () => {
   currentDiff.value = undefined;
 });
 
-watch(currentDiff, () => {
-  showLightbox.value = false;
-});
+function showImage() {
+  if (currentImageUrl.value) {
+    imageViewer.value?.show(currentImageUrl.value);
+  }
+}
 
 async function refresh() {
   if (loading.value) {
@@ -224,30 +205,4 @@ async function openEditor() {
     }
   }
 }
-
-.lightbox-body {
-  position: relative;
-}
-
-.lightbox-close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  padding: 0;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.75);
-  }
-}
 </style>
diff --git a/plugins/v-viewer.client.ts b/plugins/v-viewer.client.ts
new file mode 100644
index 0000000..0d7d1b1
--- /dev/null
+++ b/plugins/v-viewer.client.ts
@@ -0,0 +1,6 @@
+import VueViewer from 'v-viewer';
+import 'viewerjs/dist/viewer.css';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueViewer);
+});