[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 "Security & CORS" modal to the Settings page, backed by a new Pinia store, allowing users to configure CORS origins and extension shortcuts at runtime against the aw-server-rust API. Several concerns from previous review rounds (missing error mapping, type safety, ok-disabled guard) have been addressed in this version.

• The store's save() action merges the payload into local state but never sets needs_restart: true, so the restart-required banner won't appear if the user saves on a freshly-started server and reopens the modal before the next load().
• The prior P1 from the previous review round — load() not clearing this.config before re-fetching, which hides errors on a failed reload — remains unaddressed in cors.ts.

Confidence Score: 4/5

• Safe to merge once the stale-config-on-reload issue (flagged in a prior round) and the needs_restart post-save inconsistency are addressed.
• Multiple prior P1 concerns have been resolved, which is a meaningful improvement. However, the stale-config-on-reload P1 from the previous review is still present in cors.ts (this.config is not cleared before re-fetching), and the new needs_restart post-save issue means the restart warning may silently fail to appear after a first-time save. These two issues together keep the score at 4 rather than 5.
• src/stores/cors.ts — both the stale-config-on-reload (prior round) and the needs_restart post-save gap are here.

Important Files Changed

Filename	Overview
src/stores/cors.ts	New Pinia store for CORS config; load() does not clear this.config before re-fetching (stale-data-on-failure, flagged previously), and save() never sets needs_restart: true in local state after a successful write.
src/components/CorsConfigModal.vue	New BootstrapVue modal for editing CORS settings; previous concerns (error mapping, type safety, ok-disabled) appear addressed. Remaining issue: native alert() used for save success/failure feedback instead of $bvToast.
src/views/settings/Settings.vue	Minimal integration change: adds a "Configure CORS" button and mounts CorsConfigModal after DeveloperSettings. No logic concerns.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant M as CorsConfigModal
    participant S as useCorsStore
    participant API as aw-server

    U->>M: Opens modal
    M->>S: load()
    S->>API: GET /0/cors-config
    API-->>S: CorsConfig
    S-->>M: config updated, watcher fires
    M-->>U: Form populated, fixed fields disabled

    U->>M: Edits fields and clicks OK
    M->>S: save(editable)
    S->>API: POST /0/cors-config (mutable fields only)
    API-->>S: 200 OK (response body ignored)
    S-->>S: Merges payload into config (needs_restart not updated)
    M-->>U: Modal hidden, alert shown

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,