feat(dashboard): auto-slug app names and infer route host kind from input

Two related polish passes on forms the operator hits most.

App create form: the slug field used to come before the name field and
demanded the operator hand-roll a valid slug. Now the name field comes
first and the slug is derived from it live, GitLab-style — Unicode
NFKD-decomposed, combining marks stripped (so `Café` → `cafe`), `ß`
mapped to `ss`, non-`[a-z0-9]` runs collapsed to `-`, trimmed and capped
at the backend's 63-char limit. The auto-sync releases as soon as the
operator edits the slug manually, and re-engages if they clear it. The
slug input itself runs every keystroke and paste through the same
normalizer, so dirty input never reaches the form state.

Route create form: the three-way host-kind `<select>` plus a sometimes-
disabled input was confusing — operators routinely picked the wrong
kind, typed a host the app didn't claim, and only saw the error after
hitting Create. Replace with a single text input that infers the kind
from what's there (`*` → any, `*.foo.com` → wildcard, `foo.com` →
strict), shows the detected kind as a colored chip beside the field, and
suggests the app's existing domain claims via a `<datalist>`. The same
matching logic the backend runs in `validate_route_host_against_app`
now lives in `route-utils.ts` so the form can surface a soft "not
covered by any claim" warning *before* submit. Path also pre-fills to
`/` so the most common case is one click away.

Lockfile drift from `npm install` (pre-existing 0.5.0 → 0.5.1 version
sync, npm metadata cleanup) is folded in here since it surfaced during
this work.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dashboard/src/lib/route-utils.ts

@@ -1,4 +1,4 @@
-import type { HostKind, PathKind } from './api';
+import type { AppDomain, HostKind, PathKind } from './api';
 
 /** Guess a path kind from the literal user input. The dashboard pre-fills
  *  the kind selector but the user can override (the backend trusts the
@@ -30,3 +30,97 @@ export function pathKindMismatchWarning(raw: string, kind: PathKind): string | n
 				: 'this looks like a literal path';
 	return `Selected kind is "${kind}", but ${hint}. Routing will use the selected kind.`;
 }
+
+/** Parse the user's free-text host input into the (kind, stored host)
+ *  pair the API expects. Mirrors the dashboard's pre-existing storage
+ *  convention: wildcard route hosts are stored as the bare suffix
+ *  (`*.foo.com` → `foo.com`); display-time formatting re-adds the `*.`. */
+export interface ParsedHostInput {
+	kind: HostKind;
+	/** What gets sent in the API payload as `host`. */
+	host: string;
+	/** Canonical display form, for chips/labels. */
+	display: string;
+}
+
+export function parseHostInput(raw: string): ParsedHostInput {
+	const trimmed = raw.trim();
+	if (trimmed === '' || trimmed === '*') {
+		return { kind: 'any', host: '', display: '*' };
+	}
+	if (trimmed.startsWith('*.')) {
+		const suffix = trimmed.slice(2);
+		return { kind: 'wildcard', host: suffix, display: `*.${suffix}` };
+	}
+	return { kind: 'strict', host: trimmed, display: trimmed };
+}
+
+/** Frontend mirror of `validate_route_host_against_app` in
+ *  crates/manager-core/src/route_admin.rs. Lets us surface a live
+ *  warning instead of waiting for a 422. The server runs the same
+ *  check on submit — this is purely an early signal. */
+export type HostClaimCheck =
+	| { ok: true; matched: string }
+	| { ok: false; reason: string };
+
+export function checkHostAgainstClaims(
+	parsed: ParsedHostInput,
+	claims: AppDomain[]
+): HostClaimCheck {
+	if (parsed.kind === 'any') return { ok: true, matched: '*' };
+	if (claims.length === 0) {
+		return {
+			ok: false,
+			reason: 'this app has no domain claims yet — add one in the app’s Domains tab'
+		};
+	}
+	const hostLower = parsed.host.toLowerCase();
+	for (const claim of claims) {
+		const claimLower = claim.pattern.toLowerCase();
+		const claimSuffix = claimLower.split('.').slice(1).join('.');
+		if (parsed.kind === 'strict') {
+			if (claim.shape === 'exact' && hostLower === claimLower) {
+				return { ok: true, matched: claim.pattern };
+			}
+			if (
+				(claim.shape === 'wildcard' || claim.shape === 'parameterized') &&
+				claimSuffix &&
+				hostLower.endsWith(`.${claimSuffix}`)
+			) {
+				return { ok: true, matched: claim.pattern };
+			}
+		} else {
+			// wildcard route
+			if (
+				(claim.shape === 'wildcard' || claim.shape === 'parameterized') &&
+				claimSuffix === hostLower
+			) {
+				return { ok: true, matched: claim.pattern };
+			}
+		}
+	}
+	return {
+		ok: false,
+		reason: `${parsed.display} is not covered by any of this app’s claims`
+	};
+}
+
+/** Suggestion strings for the host input's <datalist>. We always
+ *  include the wildcard `*` (any host) as the first option, then the
+ *  app's claims rendered in the form the route input expects. */
+export function hostSuggestions(claims: AppDomain[]): string[] {
+	const items: string[] = ['*'];
+	for (const claim of claims) {
+		if (claim.shape === 'exact') {
+			items.push(claim.pattern);
+		} else {
+			// Both wildcard and parameterized claims are usable as a
+			// wildcard route. Render as `*.suffix` — we can't preserve
+			// the {param} binding name through the current route form.
+			const suffix = claim.pattern.split('.').slice(1).join('.');
+			if (suffix) items.push(`*.${suffix}`);
+		}
+	}
+	// Dedupe while preserving order.
+	return [...new Set(items)];
+}

dashboard/src/lib/slugify.ts

@@ -0,0 +1,30 @@
+// Slug normalization for app slugs, mirrored against the backend's
+// validate_slug rules in crates/manager-core/src/apps_api.rs:
+//   - regex: ^[a-z0-9][a-z0-9-]{0,62}$
+//   - 1..=63 chars, lowercase ascii alphanumerics + `-`
+//   - must start with [a-z0-9]
+//   - reserved words are enforced server-side only
+//
+// Normalization rules are GitLab-style (close to `Babosa::Latin#to_slug`):
+//   1. NFKD-decompose Unicode and drop combining marks (é → e, ñ → n,
+//      ü → u, etc.).
+//   2. ß → ss (a single common case the strip-marks pass misses).
+//   3. Lowercase.
+//   4. Replace any run of non-[a-z0-9] with a single `-`.
+//   5. Trim leading/trailing `-`.
+//   6. Truncate to 63 chars.
+
+export const SLUG_MAX = 63;
+
+export function slugify(input: string): string {
+	if (!input) return '';
+	let s = input.normalize('NFKD').replace(/[\u0300-\u036f]/g, '');
+	s = s.toLowerCase().replace(/ß/g, 'ss');
+	s = s.replace(/[^a-z0-9]+/g, '-');
+	s = s.replace(/^-+|-+$/g, '');
+	if (s.length > SLUG_MAX) {
+		// Truncate, then re-trim in case the cut landed on a `-`.
+		s = s.slice(0, SLUG_MAX).replace(/-+$/g, '');
+	}
+	return s;
+}