admin: phosphor icons replace hand-drawn svgs and text-character glyphs

health strip marks, menu ticks, chip crosses, the search magnifier, the checkbox check and the back arrows all come from @phosphor-icons/react now, pinned exactly and entered in the license ledger. changelog and version bump for 0.0.15, including the bundle budget raise to 900000 bytes.

admin/src/features/diagnostics/DiagnosticDetailPage.test.tsx

@@ -195,7 +195,7 @@ test("every code renders its own title, impact and remediation", async () => {
 test("an event retention has removed shows the server's message, not an empty page", async () => {
 	renderDetail(999);
 	await screen.findByText("no such event");
-	expect(screen.getByRole("link", { name: "← All diagnostics" })).toBeTruthy();
+	expect(screen.getByRole("link", { name: "All diagnostics" })).toBeTruthy();
 });
 
 test("an unavailable store reports the failure instead of loading forever", async () => {
@@ -219,5 +219,5 @@ test("an unavailable store reports the failure instead of loading forever", asyn
 	const alert = await screen.findByRole("alert");
 	expect(alert.textContent).toContain("The server is starting or degraded.");
 	expect(screen.queryByText("Loading event…")).toBeNull();
-	expect(screen.getByRole("link", { name: "← All diagnostics" })).toBeTruthy();
+	expect(screen.getByRole("link", { name: "All diagnostics" })).toBeTruthy();
 });

admin/src/features/diagnostics/DiagnosticDetailPage.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { ArrowLeft } from "@phosphor-icons/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
@@ -13,11 +14,17 @@ import { componentLabel, copyFor } from "./eventCopy";
 
 const styles = stylex.create({
 	back: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.25rem",
 		fontSize: "0.875rem",
 		lineHeight: "1.25rem",
 		color: colors.primaryOnSurface,
 		textDecorationLine: "none",
 	},
+	backIcon: {
+		display: "inline-flex",
+	},
 	headingRow: {
 		marginTop: "0.5rem",
 		display: "flex",
@@ -105,6 +112,17 @@ const styles = stylex.create({
 	},
 });
 
+function BackLink() {
+	return (
+		<Link to="/diagnostics" {...stylex.props(styles.back, shared.focusRing)}>
+			<span aria-hidden="true" {...stylex.props(styles.backIcon)}>
+				<ArrowLeft size={12} />
+			</span>
+			All diagnostics
+		</Link>
+	);
+}
+
 export default function DiagnosticDetailPage() {
 	const { id } = useParams({ from: "/shell/diagnostics/$id" });
 	const eventId = Number(id);
@@ -132,9 +150,7 @@ export default function DiagnosticDetailPage() {
 	if (data === undefined) {
 		return (
 			<section>
-				<Link to="/diagnostics" {...stylex.props(styles.back, shared.focusRing)}>
-					← All diagnostics
-				</Link>
+				<BackLink />
 				<InlineError error={error} onRetry={() => void refetch()} />
 			</section>
 		);
@@ -146,9 +162,7 @@ export default function DiagnosticDetailPage() {
 
 	return (
 		<section>
-			<Link to="/diagnostics" {...stylex.props(styles.back, shared.focusRing)}>
-				← All diagnostics
-			</Link>
+			<BackLink />
 			<div {...stylex.props(styles.headingRow)}>
 				<h1 {...stylex.props(styles.heading)}>{copy.title}</h1>
 				<SeverityBadge severity={data.severity} />

admin/src/features/diagnostics/HealthStrip.tsx

@@ -15,6 +15,8 @@
  * a claim about the current state, until a poll succeeds again.
  */
 
+import type { ReactNode } from "react";
+import { Circle, Pause, Warning, X } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
@@ -95,6 +97,9 @@ const styles = stylex.create({
 	danger: {
 		color: colors.dangerText,
 	},
+	icon: {
+		display: "inline-flex",
+	},
 	message: {
 		marginTop: "0.5rem",
 		fontSize: "0.875rem",
@@ -106,7 +111,12 @@ const styles = stylex.create({
 const TONES = { ok: styles.ok, notice: styles.notice, warn: styles.warn, danger: styles.danger } as const;
 
 /** Text and icon carry the state; the colour only agrees with them. */
-const ICONS: Record<FactTone, string> = { ok: "●", notice: "‖", warn: "!", danger: "✕" };
+const ICONS: Record<FactTone, ReactNode> = {
+	ok: <Circle size={12} weight="fill" />,
+	notice: <Pause size={12} />,
+	warn: <Warning size={12} />,
+	danger: <X size={12} />,
+};
 
 function FactLinkAnchor({ link }: { link: FactLink }) {
 	if (link.kind === "filter") {
@@ -151,7 +161,7 @@ function FactLinkAnchor({ link }: { link: FactLink }) {
 function Fact({ fact }: { fact: HealthFact }) {
 	return (
 		<li {...stylex.props(styles.fact, fact.tone === "ok" ? styles.quiet : styles.highlighted)}>
-			<span aria-hidden="true" {...stylex.props(TONES[fact.tone])}>
+			<span aria-hidden="true" {...stylex.props(styles.icon, TONES[fact.tone])}>
 				{ICONS[fact.tone]}
 			</span>
 			<span {...stylex.props(styles.label)}>{fact.label}</span>