milestone 23: close the remaining codex findings

the vitest "something prevents Vite server from exiting" warning was
@stylexjs/unplugin, not our code: configureServer starts a 150ms polling
interval for HMR and clears it from server.httpServer's close event, which
vitest resolves to null in middleware mode. drop that one hook under VITEST
and keep the transform.

textMuted was swept rather than judged. measured against their grounds, the
39 flat text-zinc-500 sites went 4.12:1 -> 7.56:1 in dark mode, repairing a
WCAG AA failure, so that stands; the 4 already-adaptive sites went 7.40:1 ->
4.62:1 in light mode for nothing, so a textSecondary token restores their
original zinc-600/zinc-400 pair.

append the symbol families to the reset's font stack: Select renders U+25BE
and Segoe UI does not carry it.

correct two acceptance criteria that were literally false: both greps match
only comments.

web/src/features/dashboard/DashboardPage.tsx

@@ -55,7 +55,7 @@ const styles = stylex.create({
 	},
 	periodIdle: {
 		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
-		color: colors.textMuted,
+		color: colors.textSecondary,
 	},
 	/** Dynamic: the caller sizes the placeholder to the widget it stands in for. */
 	skeletonHeight: (height: number) => ({ height }),

web/src/features/dashboard/TimeseriesChart.tsx

@@ -110,7 +110,7 @@ const styles = stylex.create({
 		rowGap: "0.25rem",
 		fontSize: "0.75rem",
 		lineHeight: "1rem",
-		color: colors.textMuted,
+		color: colors.textSecondary,
 	},
 	legendItem: {
 		display: "flex",

web/src/features/queries/QueryLogPage.tsx

@@ -88,7 +88,7 @@ const styles = stylex.create({
 		paddingInline: "0.75rem",
 		paddingBlock: "0.5rem",
 		fontWeight: 500,
-		color: colors.textMuted,
+		color: colors.textSecondary,
 	},
 	/** `divide-y`: a hairline between rows, so the first row carries none. */
 	row: {

web/src/shell/AppShell.tsx

@@ -50,7 +50,7 @@ const styles = stylex.create({
 	},
 	navIdle: {
 		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
-		color: { default: colors.textMuted, ":hover": colors.text },
+		color: { default: colors.textSecondary, ":hover": colors.text },
 	},
 	versionFooter: {
 		paddingInline: "1rem",

web/src/styles.css

@@ -25,6 +25,13 @@
 		padding: 0;
 	}
 
+	/*
+	 * This is not a reproduction of Tailwind's default stack, which is gone with
+	 * the package; text metrics drift here, which ruling 7 accepts. The symbol
+	 * families at the end are not decoration: `Select.tsx` renders U+25BE for its
+	 * chevron, and Segoe UI does not carry that glyph, so on Windows the stack
+	 * has to reach a font that does before it falls back to a substitute box.
+	 */
 	html {
 		line-height: 1.5;
 		-webkit-text-size-adjust: 100%;
@@ -35,7 +42,9 @@
 			Roboto,
 			"Helvetica Neue",
 			Arial,
-			sans-serif;
+			sans-serif,
+			"Segoe UI Symbol",
+			"Noto Sans Symbols 2";
 	}
 
 	/* Headings carry their scale from StyleX, not from the user agent. */

web/src/ui/tokens.stylex.ts

@@ -27,7 +27,20 @@ export const colors = stylex.defineVars({
 	/** Control outlines, which need more contrast than a row divider. */
 	borderStrong: { default: "oklch(87.1% 0.006 286.286)", [DARK]: "oklch(37% 0.013 285.805)" },
 	text: { default: "oklch(21% 0.006 285.885)", [DARK]: "oklch(96.7% 0.001 286.375)" },
+	/**
+	 * Secondary text. Most call sites were a flat zinc-500 before the conversion,
+	 * with no dark override, which measured 4.12:1 on the dark ground and so
+	 * failed WCAG AA; the dark value here is zinc-400, which measures 7.56:1.
+	 */
 	textMuted: { default: "oklch(55.2% 0.016 285.938)", [DARK]: "oklch(70.5% 0.015 286.067)" },
+	/**
+	 * Secondary text that already adapted before the conversion: zinc-600 on the
+	 * light ground, zinc-400 on the dark one. It is a separate token because
+	 * `textMuted`'s lighter light value measures 4.62:1 against 7.40:1 here, and
+	 * these call sites are small text — table headers, an inactive nav item, a
+	 * chart legend — where that loss shows.
+	 */
+	textSecondary: { default: "oklch(44.2% 0.017 285.786)", [DARK]: "oklch(70.5% 0.015 286.067)" },
 	/** Primary actions. Identical in both schemes, as before the conversion. */
 	primary: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
 	primaryText: { default: "#fff", [DARK]: "#fff" },

web/vite.config.ts

@@ -2,20 +2,39 @@
 import { fileURLToPath } from "node:url";
 import stylex from "@stylexjs/unplugin";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
+
+/**
+ * StyleX's Vite plugin polls its CSS store every 150ms from `configureServer`
+ * and pushes an HMR event when it changes. It clears that timer from the close
+ * event of `server.httpServer`. Vitest runs the dev server in middleware mode,
+ * where `httpServer` is null, so the timer is never cleared: the run finishes,
+ * the event loop stays awake, and vitest kills the worker after ten seconds with
+ * "something prevents Vite server from exiting". A test needs StyleX's
+ * transform, which is a different hook, and never needs its HMR — so drop this
+ * one hook under vitest and keep the plugin.
+ *
+ * Remove this once @stylexjs/unplugin clears the timer on `buildEnd` or guards
+ * the hook, and check that `npm test` still exits without the warning.
+ */
+function withoutDevServerPolling(plugin: Plugin | Plugin[]): Plugin[] {
+	return (Array.isArray(plugin) ? plugin : [plugin]).map(({ configureServer: _dropped, ...rest }) => rest);
+}
+
+function stylexPlugin(mode: string): Plugin | Plugin[] {
+	// StyleX resolves the `.stylex.ts` theme file itself, so it needs the `@`
+	// alias too — `resolve.alias` below is Vite's and the plugin cannot see it.
+	const configured = stylex.vite({
+		useCSSLayers: true,
+		dev: mode === "development",
+		runtimeInjection: false,
+		aliases: { "@/*": [fileURLToPath(new URL("./src/*", import.meta.url))] },
+	});
+	return process.env.VITEST === undefined ? configured : withoutDevServerPolling(configured);
+}
 
 export default defineConfig(({ mode }) => ({
-	plugins: [
-		// StyleX resolves the `.stylex.ts` theme file itself, so it needs the `@`
-		// alias too — `resolve.alias` below is Vite's and the plugin cannot see it.
-		stylex.vite({
-			useCSSLayers: true,
-			dev: mode === "development",
-			runtimeInjection: false,
-			aliases: { "@/*": [fileURLToPath(new URL("./src/*", import.meta.url))] },
-		}),
-		react(),
-	],
+	plugins: [stylexPlugin(mode), react()],
 	resolve: {
 		alias: {
 			"@": fileURLToPath(new URL("./src", import.meta.url)),