waf: named IP lists — lists page, ipInList builder support, list chips (#329)

* waf: named IP lists — lists page, ipInList builder support, tests

Console part of SPEC-waf-ip-lists.md (§8):

- waf/lists page: NAME|TYPE|ENTRIES|REFERENCED BY|UPDATED table,
  referenced-by links to each zone's manage page, create/edit modal
  (name immutable on edit; live per-line entry validation + duplicate
  flag + count via the new pure helper $lib/waf/lists.ts
  parseIPListEntries), delete with the server's in-use referent error
  surfaced verbatim. Writes gated on wafList.set / wafList.delete per
  the permission pre-flight convention (waf.* does not imply wafList.*).
- $lib/waf/expression.ts: in_ip_list / not_in_ip_list ip operators
  (OperatorMeta.valueKind 'listName'), buildExpression emits the
  platform macro ipInList(<accessor>, "<name>") (never an invalid or
  escaped name — the macro's name literal admits no escapes),
  parseCondition round-trips both polarities at the same fidelity bar
  as in_cidr, and wafListRefs — the TS twin of api's waflistmacro.go
  scanner (string-literal/raw/bytes/triple/comment aware; malformed
  usage carries no ref). Keep in sync with the Go scanner.
- Condition builder: the list picker Select is fed by wafList.list,
  keyed on the project param (refetches on SPA project switch); without
  wafList.list it renders disabled with the missing-permission hint.
  Works unchanged for rule expressions and limit filters (same builder).
- waf index gains an "IP lists" link + palette action; manage page
  shows a chip on rules/limits whose expression references a list
  (client-side wafListRefs), linking to the lists page.
- api.d.ts: Api.WafListItem / WafListListResult / WafListType.
- mock.ts (dev): session-mutable wafList.* handlers; the seed zone's
  allow rule now references office-ips so referencedBy and the in-use
  delete guard are exercisable offline.
- tests: unit coverage for build/parse round-trip, scanner
  literal-skipping, name/entry validation; Playwright specs for lists
  CRUD, validation gating, permission gating, the builder picker
  end-to-end (asserts the stored waf.set expression is the unexpanded
  macro), round-trip into the visual builder, and manage-page chips.

Deviations from the spec text: the edit modal's name input is readonly
(not disabled) so the value stays legible — immutability + hint intact;
the "Lists" link lives on the firewall index page-head while the
reference chips live on the manage page, which is where rules/limits
actually render.

Composes with apiserver#238 (waf-test, server-side CEL compile
validation): the console stores and round-trips the UNEXPANDED macro
form only — any compile validation must run on the expanded expression
server-side. No shared files, no expected merge conflict.

Suite: bun lint + bun check clean; bun run test 364 passed.

* waf: review fixes — stale-guard + catch on list fetch, save error surface, gate IP-lists entry points

- WafConditionBuilder: reset + stale-response guard on the project-keyed
  wafList.list fetch (out-of-order responses across an SPA project switch
  can no longer populate another project's names) and a .catch so a
  network-level failure doesn't escape as an unhandled rejection.
- WafListModal: catch network-level save failures so the user sees an
  error instead of a silently cleared spinner.
- /waf: the "IP lists" header button and palette action are now gated on
  wafList.list (GuardedButton / can()), matching the permission
  pre-flight convention.
- expression.ts: comments documenting the intentional strict-parser vs
  tolerant-chip-scanner asymmetry and the one scanner behavior that must
  stay in sync with the Go twin (token-in-literal false positives).

Rollout note: depends on the apiserver wafList.* + macro-expansion PR;
that PR must expand ipInList(...) BEFORE apiserver#238's CEL compile
validation runs (the raw macro form is not valid engine CEL).

Author: acoshift

src/lib/components/WafConditionBuilder.svelte

@@ -1,14 +1,44 @@
 <script lang="ts">
 	import { untrack } from 'svelte'
+	import api from '$lib/api'
+	import { getPermissionContext } from '$lib/permission'
 	import WafConditionRow from '$lib/components/WafConditionRow.svelte'
 	import { buildGroup, parseExpression } from '$lib/waf/expression'
 	import type { ExpressionSpec, Combinator } from '$lib/waf/expression'
 
 	interface Props {
 		expression?: string // bindable CEL expression — kept in two-way sync with the rows
+		project?: string // enables the named-IP-list picker (fed by wafList.list)
 	}
 
-	let { expression = $bindable('') }: Props = $props()
+	let { expression = $bindable(''), project = '' }: Props = $props()
+
+	const { can } = getPermissionContext()
+	// Console permission pre-flight: without wafList.list the picker renders
+	// disabled with a permission hint instead of failing the fetch.
+	const listsDenied = $derived(!can('wafList.list'))
+
+	// The project's named IP lists, feeding the in_ip_list / not_in_ip_list
+	// value Select. Keyed on `project` (not fetched in onMount) so an SPA
+	// project switch refetches instead of showing the previous project's lists;
+	// the cleanup flag drops an out-of-order response from the previous project.
+	let listNames = $state<string[]>([])
+	$effect(() => {
+		const p = project
+		listNames = []
+		if (!p || listsDenied) return
+		let stale = false
+		api.invoke<Api.WafListListResult>('wafList.list', { project: p }, fetch).then((res) => {
+			if (stale) return
+			listNames = (res.result?.items ?? []).map((it) => it.name)
+		}).catch(() => {
+			// network-level failure — best-effort picker stays empty (a name an
+			// existing rule already references remains selectable via listOptions).
+		})
+		return () => {
+			stale = true
+		}
+	})
 
 	/** A fresh blank condition row. */
 	function blankCondition (): ExpressionSpec {
@@ -114,7 +144,8 @@
 							{combinator === 'or' ? 'OR' : 'AND'}
 						</div>
 					{/if}
-					<WafConditionRow bind:condition={conditions[i]} onremove={() => removeCondition(i)} />
+					<WafConditionRow bind:condition={conditions[i]} onremove={() => removeCondition(i)}
+						{project} {listNames} {listsDenied} />
 				</div>
 			{/each}
 		</div>

src/lib/components/WafConditionRow.svelte

@@ -11,14 +11,19 @@
 		parseList
 	} from '$lib/waf/expression'
 	import type { ExpressionSpec } from '$lib/waf/expression'
+	import { validListName } from '$lib/waf/lists'
+	import { denyTooltip } from '$lib/permission'
 
 	interface Props {
 		condition: ExpressionSpec // bindable structured condition
 		onremove: () => void // remove this row
 		removable?: boolean // show the remove button (default true)
+		project?: string // for the manage-lists hint link
+		listNames?: string[] // the project's named IP lists (wafList.list)
+		listsDenied?: boolean // caller lacks wafList.list → picker disabled with a hint
 	}
 
-	let { condition = $bindable(), onremove, removable = true }: Props = $props()
+	let { condition = $bindable(), onremove, removable = true, project = '', listNames = [], listsDenied = false }: Props = $props()
 
 	const fieldMeta = $derived(getField(condition.field))
 	const fieldType = $derived(fieldMeta?.type ?? 'string')
@@ -36,6 +41,22 @@
 		!!fieldMeta?.suggestions &&
 		(condition.operator === 'equals' || condition.operator === 'not_equals')
 	)
+	// Named-IP-list membership — the value is a list name picked from the
+	// project's wafList.list result rather than free text.
+	const isListName = $derived(
+		operators.find((o) => o.value === condition.operator)?.valueKind === 'listName'
+	)
+	// Keep an already-referenced name selectable even when it's missing from the
+	// fetched set (e.g. still loading, or the caller can't list) so opening an
+	// existing rule never silently rewrites its list reference. Only a valid
+	// list NAME is injected — a leftover value from another operator (e.g. a
+	// CIDR) must not masquerade as a list.
+	const listOptions = $derived.by(() => {
+		const names = [...listNames]
+		const v = (condition.value ?? '').trim()
+		if (v && validListName(v) && !names.includes(v)) names.unshift(v)
+		return names.map((n) => ({ value: n, label: n }))
+	})
 
 	const fieldOptions = fields.map((f) => ({ value: f.value, label: f.label }))
 	const operatorOptions = $derived(operators.map((o) => ({ value: o.value, label: o.label })))
@@ -128,6 +149,25 @@
 							? 'e.g. 13335, press Enter to add'
 							: 'Type a value, press Enter to add'} />
 				</div>
+			{:else if isListName}
+				<div class="field">
+					<label for="waf-list-name">IP list</label>
+					{#if listsDenied}
+						<span class="inline-flex" title={denyTooltip('wafList.list')}>
+							<Select id="waf-list-name" disabled options={[]} placeholder="No permission to view IP lists" />
+						</span>
+					{:else}
+						<Select id="waf-list-name" value={condition.value ?? ''}
+							options={listOptions}
+							disabled={listOptions.length === 0}
+							placeholder={listOptions.length ? 'Select an IP list' : 'No IP lists yet'}
+							onchange={(v) => (condition.value = String(v))} />
+						<p class="helper">
+							Reusable named lists, managed on the
+							<a class="link" href={`/waf/lists?project=${project}`}>IP lists</a> page.
+						</p>
+					{/if}
+				</div>
 			{:else if useCombobox}
 				<div class="field">
 					<label for="waf-value">Value</label>

src/lib/components/WafListModal.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import api from '$lib/api'
+	import GuardedButton from '$lib/components/GuardedButton.svelte'
+	import {
+		WAF_LIST_MAX_ENTRIES,
+		WAF_LIST_NAME_MAX,
+		WAF_LIST_NAME_MIN,
+		parseIPListEntries,
+		validListName
+	} from '$lib/waf/lists'
+
+	interface Props {
+		project: string
+		/** called after a successful wafList.set so the page can reload its data */
+		onsaved: () => void
+	}
+
+	const { project, onsaved }: Props = $props()
+
+	let isActive = $state(false)
+	// Editing keeps the name immutable — the name is the reference key every
+	// ipInList macro points at; renaming is delete + recreate by design.
+	let editing = $state(false)
+	let name = $state('')
+	let description = $state('')
+	let entriesText = $state('')
+	let saving = $state(false)
+	let errorMessage = $state('')
+
+	const entriesPlaceholder = 'One IP or CIDR per line, e.g.\n203.0.113.0/24\n198.51.100.7\n2001:db8::/48'
+
+	const parsed = $derived(parseIPListEntries(entriesText))
+	const nameOk = $derived(validListName(name.trim()))
+	const canSave = $derived((editing || nameOk) && parsed.errors.length === 0 && !saving)
+
+	// Keep the error list scannable — the textarea can hold hundreds of lines.
+	const shownErrors = $derived(parsed.errors.slice(0, 5))
+	const moreErrors = $derived(parsed.errors.length - shownErrors.length)
+
+	export function open (list?: Api.WafListItem): void {
+		editing = !!list
+		name = list?.name ?? ''
+		description = list?.description ?? ''
+		entriesText = (list?.entries ?? []).join('\n')
+		saving = false
+		errorMessage = ''
+		isActive = true
+	}
+
+	function close () {
+		isActive = false
+	}
+
+	function onBackdrop (e: MouseEvent) {
+		if (e.target === e.currentTarget) close()
+	}
+
+	async function save (e: Event) {
+		e.preventDefault()
+		if (!canSave) return
+
+		saving = true
+		errorMessage = ''
+		try {
+			const resp = await api.invoke('wafList.set', {
+				project,
+				name: name.trim(),
+				description,
+				type: 'ip',
+				entries: parsed.entries
+			}, fetch)
+			if (!resp.ok) {
+				// Surface the server's message verbatim (e.g. an expanded-size cap
+				// naming the zone/rule the update would overflow).
+				errorMessage = (resp.error?.validate ?? [resp.error?.message ?? 'Failed to save the list.']).join('\n')
+				return
+			}
+			close()
+			onsaved()
+		} catch {
+			// api.invoke only rejects on a network-level fetch failure (non-JSON
+			// bodies are already normalized into an error envelope).
+			errorMessage = 'Failed to save the list — network error. Try again.'
+		} finally {
+			saving = false
+		}
+	}
+</script>
+
+<div class="modal" onclick={onBackdrop} class:is-active={isActive} aria-hidden={!isActive}>
+	<div class="modal-panel">
+		<div class="modal-close" onclick={close} onkeypress={close} tabindex="0" role="button">✕</div>
+		<h4><strong>{editing ? 'Edit IP list' : 'New IP list'}</strong></h4>
+		<p class="text-content/50 text-sm mt-1">
+			A named set of IPs/CIDRs, referenced from rule conditions and rate-limit
+			filters as <code class="font-mono">ipInList(request.remote_ip, "{name.trim() || 'name'}")</code>.
+			Editing re-applies every firewall that references it.
+		</p>
+
+		<form class="grid gap-4 mt-4" onsubmit={save}>
+			<div class="field">
+				<label for="waf-list-modal-name">Name</label>
+				<div class="input">
+					<input id="waf-list-modal-name" class="font-mono" bind:value={name}
+						readonly={editing} placeholder="office-ips">
+				</div>
+				{#if editing}
+					<p class="text-content/50 text-sm mt-1">
+						The name is what rules reference — it can't change. Create a new
+						list to rename.
+					</p>
+				{:else}
+					<p class="{name.trim() !== '' && !nameOk ? 'text-negative' : 'text-content/50'} text-sm mt-1">
+						{WAF_LIST_NAME_MIN}–{WAF_LIST_NAME_MAX} characters; lowercase
+						letters, numbers, and hyphens, starting with a letter and ending
+						with a letter or number.
+					</p>
+				{/if}
+			</div>
+
+			<div class="field">
+				<label for="waf-list-modal-description">Description</label>
+				<div class="input">
+					<input id="waf-list-modal-description" bind:value={description} placeholder="Optional description">
+				</div>
+			</div>
+
+			<div class="field">
+				<label for="waf-list-modal-entries">Entries</label>
+				<div class="textarea">
+					<textarea id="waf-list-modal-entries" class="font-mono" rows="8" bind:value={entriesText}
+						placeholder={entriesPlaceholder}></textarea>
+				</div>
+				<p class="text-content/50 text-sm mt-1">
+					{parsed.entries.length} {parsed.entries.length === 1 ? 'entry' : 'entries'}
+					(max {WAF_LIST_MAX_ENTRIES}). An empty list never matches.
+				</p>
+				{#if shownErrors.length}
+					<ul class="text-negative text-sm mt-1 grid gap-0.5">
+						{#each shownErrors as err (err)}
+							<li>{err}</li>
+						{/each}
+						{#if moreErrors > 0}
+							<li class="text-content/50">…and {moreErrors} more.</li>
+						{/if}
+					</ul>
+				{/if}
+			</div>
+
+			{#if errorMessage}
+				<p class="text-negative text-sm whitespace-pre-line">{errorMessage}</p>
+			{/if}
+
+			<div class="flex items-center gap-3 mt-2">
+				<GuardedButton permission="wafList.set" type="submit" loading={saving} disabled={!canSave}
+					title={canSave ? undefined : 'Enter a valid name and fix the entry errors first'}>
+					Save
+				</GuardedButton>
+				<button type="button" class="button is-variant-secondary" disabled={saving} onclick={close}>
+					Cancel
+				</button>
+			</div>
+		</form>
+	</div>
+</div>
+
+<style>
+	.modal-panel {
+		width: 100%;
+		max-width: 36rem;
+	}
+</style>