fix(ux): replace prompt() with modals for Android WebView compatibility (#966)

* fix(ux): replace prompt() with modals for Android WebView compatibility

prompt() is unsupported in Android WebView — it silently returns null
with no error or feedback. Affected 5 call sites:

- CategorizationSettings.vue: new category set name
- QueryExplorer.vue: save query name and rename query
- ActivityView.vue: watcher name + visualization title (combined modal)

Each replaced with a b-modal + b-form-input, preserving the same
validation logic. The custom_vis case uses a single modal with two
fields instead of two sequential prompts.

Git-Session-Id: 77f0

* ci: retrigger CI (pre-existing log-collection failure, tests all pass)

Git-Session-Id: 4c53

* fix(ci): handle missing log dir in Move logs step

When aw-server-rust master runs in test mode it does not create
log files under ~/.cache/activitywatch/log. The bare glob mv then
fails with 'cannot stat' (exit 1), failing the job even though all
7 e2e tests passed.

Replace the glob mv with find ... -exec mv, which is a no-op when
no logs exist (|| true guards the 2>/dev/null stderr case too).

* fix(ux): keep invalid modal forms open

Git-Session-Id: 54708688-1fac-5f0f-860f-38890e2aa434

* fix(ci): tolerate missing server logs

Git-Session-Id: 54708688-1fac-5f0f-860f-38890e2aa434

* fix(ux): retain query modal on persistence failure

Git-Session-Id: 4072740d-707c-569f-84e1-194d4c0175a6

* fix(ux): cancel query modal close before persistence

Git-Session-Id: 0ce90394-8c74-545a-b4a3-e84ba2da00cf

---------

Co-authored-by: Erik Bjäreholt <erik@bjareho.lt>

Author: TimeToBuildBob

src/views/QueryExplorer.vue

@@ -48,6 +48,34 @@ div
   hr
 
   aw-selectable-eventview(:events="events", :event_type="event_type")
+
+  b-modal(
+    v-model="showSaveQueryModal"
+    title="Save Query"
+    ok-title="Save"
+    @ok="onSaveQueryConfirm"
+    @shown="$refs.saveQueryNameInput && $refs.saveQueryNameInput.focus()"
+  )
+    b-form-group(label="Name for the saved query:")
+      b-form-input(
+        ref="saveQueryNameInput"
+        v-model="saveQueryName"
+        placeholder="Query name"
+      )
+
+  b-modal(
+    v-model="showRenameQueryModal"
+    title="Rename Query"
+    ok-title="Rename"
+    @ok="onRenameQueryConfirm"
+    @shown="$refs.renameQueryNameInput && $refs.renameQueryNameInput.focus()"
+  )
+    b-form-group(label="New name for saved query:")
+      b-form-input(
+        ref="renameQueryNameInput"
+        v-model="renameQueryName"
+        placeholder="Query name"
+      )
 </template>
 
 <style scoped lang="scss">
@@ -108,6 +136,10 @@ RETURN = sort_by_duration(merged_events);
       selected_saved_query_id: '',
       startdate: today.format('YYYY-MM-DD'),
       enddate: tomorrow.format('YYYY-MM-DD'),
+      showSaveQueryModal: false,
+      saveQueryName: '',
+      showRenameQueryModal: false,
+      renameQueryName: '',
     };
   },
   computed: {
@@ -178,15 +210,16 @@ RETURN = sort_by_duration(merged_events);
         return;
       }
 
-      const defaultName = getDefaultSavedQueryName(this.query_code);
-      const name = prompt('Name for the saved query:', defaultName);
-      if (name === null) {
-        return;
-      }
+      // No existing query — open modal to get a name
+      this.saveQueryName = getDefaultSavedQueryName(this.query_code);
+      this.showSaveQueryModal = true;
+    },
+    onSaveQueryConfirm: async function (event) {
+      event.preventDefault();
 
-      const trimmedName = name.trim();
+      const trimmedName = this.saveQueryName.trim();
       if (_.isEmpty(trimmedName)) {
-        alert('Saved query name cannot be empty.');
+        this.saved_query_error = 'Saved query name cannot be empty.';
         return;
       }
 
@@ -206,30 +239,39 @@ RETURN = sort_by_duration(merged_events);
       const didPersist = await this.persistSavedQueries([...this.savedQueries, newQuery]);
       if (didPersist) {
         this.selected_saved_query_id = newId;
+        this.showSaveQueryModal = false;
       }
     },
     renameSelectedQuery: async function () {
       if (!this.selectedSavedQuery) {
         return;
       }
 
-      const name = prompt('Rename saved query:', this.selectedSavedQuery.name);
-      if (name === null) {
+      this.renameQueryName = this.selectedSavedQuery.name;
+      this.showRenameQueryModal = true;
+    },
+    onRenameQueryConfirm: async function (event) {
+      event.preventDefault();
+
+      if (!this.selectedSavedQuery) {
         return;
       }
 
-      const trimmedName = name.trim();
+      const trimmedName = this.renameQueryName.trim();
       if (_.isEmpty(trimmedName)) {
-        alert('Saved query name cannot be empty.');
+        this.saved_query_error = 'Saved query name cannot be empty.';
         return;
       }
 
       const selectedQueryId = this.selectedSavedQuery.id;
-      await this.persistSavedQueries(
+      const didPersist = await this.persistSavedQueries(
         this.savedQueries.map(savedQuery =>
           savedQuery.id === selectedQueryId ? { ...savedQuery, name: trimmedName } : savedQuery
         )
       );
+      if (didPersist) {
+        this.showRenameQueryModal = false;
+      }
     },
     deleteSelectedQuery: async function () {
       if (!this.selectedSavedQuery) {

src/views/activity/ActivityView.vue

@@ -54,6 +54,23 @@ div(v-else-if="view")
     br
     br
     | This will delete the view's configuration. You can run #[b Restore defaults] to bring built-in views back.
+
+  b-modal(
+    v-model="showCustomVisModal"
+    title="Add Custom Visualization"
+    ok-title="Add"
+    @ok="onCustomVisConfirm"
+  )
+    b-form-group(label="Watcher name:")
+      b-form-input(
+        v-model="customVisWatcherName"
+        placeholder="aw-watcher-"
+      )
+    b-form-group(label="Visualization title:")
+      b-form-input(
+        v-model="customVisTitle"
+        placeholder="My Visualization"
+      )
 </template>
 
 <script lang="ts">
@@ -75,7 +92,13 @@ export default {
     view_id: { type: String, default: 'default' },
   },
   data() {
-    return { editing: false };
+    return {
+      editing: false,
+      showCustomVisModal: false,
+      customVisWatcherName: 'aw-watcher-',
+      customVisTitle: '',
+      pendingCustomVisId: null as number | null,
+    };
   },
   computed: {
     views: function () {
@@ -131,22 +154,32 @@ export default {
       useViewsStore().addVisualization({ view_id: this.view.id, type: 'top_apps' });
     },
     async onTypeChange(id, type) {
-      let props = {};
-
       if (type === 'custom_vis') {
-        const visname = prompt('Please enter the watcher name', 'aw-watcher-');
-        if (!visname) return;
-
-        const title = prompt('Please enter the visualization title');
-        if (!title) return;
-
-        props = {
-          visname,
-          title,
-        };
+        // Show modal to collect watcher name and visualization title
+        this.pendingCustomVisId = id;
+        this.customVisWatcherName = 'aw-watcher-';
+        this.customVisTitle = '';
+        this.showCustomVisModal = true;
+        return;
       }
 
-      await useViewsStore().editView({ view_id: this.view.id, el_id: id, type, props });
+      await useViewsStore().editView({ view_id: this.view.id, el_id: id, type, props: {} });
+    },
+    async onCustomVisConfirm(event) {
+      if (!this.customVisWatcherName.trim() || !this.customVisTitle.trim()) {
+        event.preventDefault();
+        return;
+      }
+      const props = {
+        visname: this.customVisWatcherName,
+        title: this.customVisTitle,
+      };
+      await useViewsStore().editView({
+        view_id: this.view.id,
+        el_id: this.pendingCustomVisId,
+        type: 'custom_vis',
+        props,
+      });
     },
     async onRemove(id) {
       await useViewsStore().removeVisualization({ view_id: this.view.id, el_id: id });

src/views/settings/CategorizationSettings.vue

@@ -85,6 +85,20 @@ div
     b-collapse#category-builder-collapse(v-model="builderOpen")
       div.mt-3(v-if="builderMounted")
         CategoryBuilder(embedded)
+
+  b-modal(
+    v-model="showCreateSetModal"
+    title="New Category Set"
+    ok-title="Create"
+    @ok="onCreateSetConfirm"
+    @shown="$refs.newSetNameInput && $refs.newSetNameInput.focus()"
+  )
+    b-form-group(label="Name for the new category set:")
+      b-form-input(
+        ref="newSetNameInput"
+        v-model="newSetName"
+        placeholder="Category set name"
+      )
 </template>
 <script lang="ts">
 import { mapState, mapGetters } from 'pinia';
@@ -112,6 +126,8 @@ export default {
     activeSetId: 'default',
     builderOpen: false,
     builderMounted: false,
+    showCreateSetModal: false,
+    newSetName: '',
   }),
   computed: {
     ...mapState(useCategoryStore, ['classes_unsaved_changes']),
@@ -231,9 +247,17 @@ export default {
       }
     },
     createSet: function () {
-      const name = prompt('Name for the new category set:');
-      if (!name) return;
+      this.newSetName = '';
+      this.showCreateSetModal = true;
+    },
+    onCreateSetConfirm: function (event) {
+      const name = this.newSetName.trim();
+      if (!name) {
+        event.preventDefault();
+        return;
+      }
       if (this.categoryStore.category_sets.find(s => s.id === name)) {
+        event.preventDefault();
         alert(`A set named "${name}" already exists.`);
         return;
       }

test/unit/ActivityView.test.js

@@ -21,6 +21,17 @@ describe('ActivityView isVisLarge', () => {
   });
 });
 
+describe('ActivityView custom visualization modal', () => {
+  test('stays open when a required field is blank', async () => {
+    const event = { preventDefault: jest.fn() };
+    const vm = { customVisWatcherName: 'aw-watcher-window', customVisTitle: '   ' };
+
+    await ActivityView.methods.onCustomVisConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+});
+
 // Visualizations keep local state — the Top Bucket Data picker holds its
 // selected bucket, field and fetched events in `data` and fills them in
 // `mounted`. Every view renders the same list at the same positions, so if a

test/unit/QueryExplorer.test.js

@@ -42,4 +42,125 @@ describe('QueryExplorer saveCurrentQuery', () => {
     confirmSpy.mockRestore();
     promptSpy.mockRestore();
   });
+
+  test('keeps save modal open when the query name is blank', async () => {
+    const event = { preventDefault: jest.fn() };
+    const vm = {
+      saveQueryName: '   ',
+      saved_query_error: '',
+    };
+
+    await QueryExplorer.methods.onSaveQueryConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(vm.saved_query_error).toBe('Saved query name cannot be empty.');
+  });
+
+  test('cancels save modal closure before awaiting persistence failure', async () => {
+    const event = { preventDefault: jest.fn() };
+    let resolvePersistence;
+    const persistence = new Promise(resolve => {
+      resolvePersistence = resolve;
+    });
+    const vm = {
+      enddate: '2026-05-21',
+      event_type: 'currentwindow',
+      persistSavedQueries: jest.fn().mockReturnValue(persistence),
+      query_code: 'RETURN = [];',
+      saveQueryName: 'Daily Coding Time',
+      savedQueries: [],
+      selected_saved_query_id: '',
+      showSaveQueryModal: true,
+      startdate: '2026-05-20',
+    };
+
+    const confirmation = QueryExplorer.methods.onSaveQueryConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(vm.showSaveQueryModal).toBe(true);
+
+    resolvePersistence(false);
+    await confirmation;
+
+    expect(vm.selected_saved_query_id).toBe('');
+    expect(vm.showSaveQueryModal).toBe(true);
+  });
+
+  test('closes save modal after persistence succeeds', async () => {
+    const event = { preventDefault: jest.fn() };
+    const vm = {
+      enddate: '2026-05-21',
+      event_type: 'currentwindow',
+      persistSavedQueries: jest.fn().mockResolvedValue(true),
+      query_code: 'RETURN = [];',
+      saveQueryName: 'Daily Coding Time',
+      savedQueries: [],
+      selected_saved_query_id: '',
+      showSaveQueryModal: true,
+      startdate: '2026-05-20',
+    };
+
+    await QueryExplorer.methods.onSaveQueryConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(vm.selected_saved_query_id).not.toBe('');
+    expect(vm.showSaveQueryModal).toBe(false);
+  });
+
+  test('keeps rename modal open when the query name is blank', async () => {
+    const event = { preventDefault: jest.fn() };
+    const vm = {
+      renameQueryName: '   ',
+      saved_query_error: '',
+      selectedSavedQuery: { id: 'daily-coding-time', name: 'Daily Coding Time' },
+    };
+
+    await QueryExplorer.methods.onRenameQueryConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(vm.saved_query_error).toBe('Saved query name cannot be empty.');
+  });
+
+  test('cancels rename modal closure before awaiting persistence failure', async () => {
+    const event = { preventDefault: jest.fn() };
+    let resolvePersistence;
+    const persistence = new Promise(resolve => {
+      resolvePersistence = resolve;
+    });
+    const selectedSavedQuery = { id: 'daily-coding-time', name: 'Daily Coding Time' };
+    const vm = {
+      persistSavedQueries: jest.fn().mockReturnValue(persistence),
+      renameQueryName: 'Coding Time',
+      savedQueries: [selectedSavedQuery],
+      selectedSavedQuery,
+      showRenameQueryModal: true,
+    };
+
+    const confirmation = QueryExplorer.methods.onRenameQueryConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(vm.showRenameQueryModal).toBe(true);
+
+    resolvePersistence(false);
+    await confirmation;
+
+    expect(vm.showRenameQueryModal).toBe(true);
+  });
+
+  test('closes rename modal after persistence succeeds', async () => {
+    const event = { preventDefault: jest.fn() };
+    const selectedSavedQuery = { id: 'daily-coding-time', name: 'Daily Coding Time' };
+    const vm = {
+      persistSavedQueries: jest.fn().mockResolvedValue(true),
+      renameQueryName: 'Coding Time',
+      savedQueries: [selectedSavedQuery],
+      selectedSavedQuery,
+      showRenameQueryModal: true,
+    };
+
+    await QueryExplorer.methods.onRenameQueryConfirm.call(vm, event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(vm.showRenameQueryModal).toBe(false);
+  });
 });