[IMP] add server settings for CORS

[RaoufGhrissi]

Dependent on: ActivityWatch/aw-server-rust#581

[RaoufGhrissi]

I will apply the same changes to aw-server once validated on aw-server-rust

[greptile-apps]

Greptile Summary

This PR adds a CORS configuration modal (CorsConfigModal.vue) accessible from the Settings page, backed by a new Pinia store (cors.ts). The store fetches and saves mutable CORS fields via /0/cors-config, and the modal correctly disables the OK button when the config hasn't loaded and surfaces store errors. Prior review concerns about missing error mapping and the incomplete editable type have been addressed.

Confidence Score: 3/5

Safe to merge after addressing the remaining unresolved P1 (stale config on failed reload, flagged in a prior review cycle) and the new needs_restart stale-state issue.

The prior P1 issue — load() never clears this.config before refetching, so a failed reload silently shows stale data while the error branch stays hidden — was flagged in the previous review and is still not addressed in the current commit. Additionally, needs_restart is not updated to true after a successful save, causing the restart banner to be absent on the next modal open until the server responds. Both issues affect data-integrity signals shown to the user.

src/stores/cors.ts — load() stale-config reset and needs_restart post-save update.

Vulnerabilities

No security vulnerabilities introduced. The store sends only the MutableCorsConfig subset to the server, which prevents unintended field injection. The alert() call uses plain text so there is no XSS risk from server-returned error messages. The "Allow all Firefox extensions" warning correctly flags the security risk inline.

Important Files Changed

Filename	Overview
src/components/CorsConfigModal.vue	New modal for editing CORS config. Previous concerns about missing error state and incomplete editable type have been addressed; residual risk is the underlying stale-config issue in the store (previous thread).
src/stores/cors.ts	New Pinia store for CORS state. needs_restart is not set to true after save; load() still does not clear this.config before refetch (previous thread), so stale config is shown on failed reload.
src/views/settings/Settings.vue	Minimal change: adds "Configure CORS" button and CorsConfigModal component after DeveloperSettings. Correctly registered in components. No issues.

Sequence Diagram

sequenceDiagram
    participant User
    participant CorsConfigModal
    participant CorsStore
    participant Server

    User->>CorsConfigModal: Click "Configure CORS"
    CorsConfigModal->>CorsStore: load()
    CorsStore->>Server: GET /0/cors-config
    Server-->>CorsStore: CorsConfig (cors, cors_regex, flags, in_file, needs_restart)
    CorsStore-->>CorsConfigModal: config (watch fires → editable, corsStr, corsRegexStr updated)

    User->>CorsConfigModal: Edit fields, click OK
    CorsConfigModal->>CorsStore: save(editable as MutableCorsConfig)
    CorsStore->>Server: POST /0/cors-config (mutable fields only)
    Server-->>CorsStore: 200 OK
    CorsStore->>CorsStore: config = {...config, ...payload} (needs_restart NOT updated)
    CorsConfigModal->>User: Modal closes + alert("restart required")

Loading

_{Reviews (7): Last reviewed commit: "[SEC] restrict CORS to authorized extens..." | Re-trigger Greptile}

[greptile-apps]

Markdown bold syntax renders literally in Pug

The **Manifest URL** syntax is Markdown, not Pug/HTML. Pug templates do not process Markdown, so users will see the asterisks rendered literally in the browser (**Manifest URL** instead of Manifest URL). Use an inline <b> tag or Pug's b element instead.

Suggested change

	li Look for your extension and copy the **Manifest URL** (e.g. <code>moz-extension://4b931c07deded...ff152/manifest.json</code>).
	li Look for your extension and copy the <b>Manifest URL</b> (e.g. <code>moz-extension://4b931c07deded...ff152/manifest.json</code>).

[greptile-apps]

Regex field instructions advise pasting literal URLs containing unescaped dots

Step 3 tells the user to paste a raw moz-extension://... URL (e.g. moz-extension://4b931c07deded...ff152) into the Regex CORS origins field. However, the dots (.) in that URL are regex metacharacters that match any character, so the pattern will also match origins with different characters in those positions. This could allow an unintended extension to bypass the CORS check.

Consider updating the instructions to advise users to escape literal dots with \., or direct them to paste the origin into the Fixed CORS origins field instead (which uses exact matching), if the backend supports it.

[greptile-apps]

Duplicate commit hash display

The "Web UI commit hash" line is already shown at the bottom of DeveloperSettings.vue. Having it repeated at the bottom of ServerSettings.vue as well is redundant and looks like an accidental copy-paste. Consider removing it from ServerSettings.vue.

[greptile-apps]

Unused showSettings data property

The data() function exposes showSettings: false, but this property is never referenced anywhere in the template or the computed/methods sections. It appears to be an accidental copy-paste artefact from another settings component. It can be safely removed.

Suggested change

	return {
	showSettings: false,
	};
	},
	computed: {

[greptile-apps]

Tip:

Greploop — Automatically fix all review issues by running /greploops in Claude Code. It iterates: fix, push, re-review, repeat until 5/5 confidence.

Use the Greptile plugin for Claude Code to query reviews, search comments, and manage custom context directly from your terminal.

[greptile-apps]

Missing error state — OK button stays active on load failure

The store sets this.error when load() fails, but the component only maps config and loading from the store — error is never observed. When the API returns an error, loading becomes false and config stays null, so the modal shows a completely blank body while the OK button remains enabled (:ok-disabled="loading" only guards the in-flight case). A user clicking OK at that point sends the component's initialised-to-empty editable (cors: [], cors_regex: [], ...) to the server, potentially wiping the existing CORS configuration.

Two changes are needed: (1) also map error from the store and display it, and (2) disable OK when the config hasn't loaded:

Suggested change

	div(v-else-if="loading")
	p Loading...
	div(v-else-if="loading")
	p Loading...
	div(v-else-if="error")
	b-alert(show variant="danger") Failed to load CORS configuration: {{ error }}

And update the modal's ok-disabled binding:

b-modal(... :ok-disabled="loading || !config" ...)

[greptile-apps]

editable declared type is missing CorsConfig fields

editable is initialised with only four fields, but corsStore.save() expects a full CorsConfig (which also requires in_file and needs_restart). TypeScript will likely raise a compile error at the corsStore.save(this.editable) call because the declared type of editable does not satisfy CorsConfig. Declare editable as CorsConfig from the start so the types align end-to-end.

Suggested change

	editable: {
	cors: [] as string[],
	cors_regex: [] as string[],
	cors_allow_aw_chrome_extension: false,
	cors_allow_all_mozilla_extension: false,
	},
	corsStr: '',
	corsRegexStr: '',
	corsStore: useCorsStore(),
	};
	editable: {
	cors: [] as string[],
	cors_regex: [] as string[],
	cors_allow_aw_chrome_extension: false,
	cors_allow_all_mozilla_extension: false,
	in_file: [] as string[],
	needs_restart: false,
	} as CorsConfig,

[greptile-apps]

Stale config shown on failed reload

load() never clears this.config before issuing the request. When the modal is opened a second time and the fetch fails, this.config still holds the previous session's data. Back in the template, v-if="config" evaluates to true, so the form renders with stale values and the v-else-if="error" branch is never reached — the user sees no indication that the reload failed and edits data they believe to be current.

Add this.config = null; at the top of load() so that a failed refetch exposes the error state:

Suggested change

	async load() {
	this.loading = true;
	this.error = null;
	try {
	const client = getClient();
	const response = await client.req.get('/0/cors-config');
	this.config = response.data;
	} catch (e: any) {
	this.error = e.response?.data?.message || e.message || 'Failed to load CORS config';
	} finally {
	this.loading = false;
	}
	async load() {
	this.loading = true;
	this.config = null;
	this.error = null;
	try {
	const client = getClient();
	const response = await client.req.get('/0/cors-config');
	this.config = response.data;
	} catch (e: any) {
	this.error = e.response?.data?.message || e.message || 'Failed to load CORS config';
	} finally {
	this.loading = false;
	}
	},

[greptile-apps]

Greptile encountered an error while reviewing this PR. Please reach out to support@greptile.com for assistance.