feat(ui): convert the chrome pictographs to dot-matrix glyphs (RIG-3739)

apps/ui/src/App.test.tsx

@@ -272,14 +272,14 @@ describe("coaching tooltips (RIG-2530 T2)", () => {
 		);
 		expect(left).not.toBeNull();
 		expect(right).not.toBeNull();
-		// The visible content is a decorative block glyph; the accessible name
-		// must come from aria-label, never the glyph.
+		// The visible content is a decorative <Glyph> SVG (aria-hidden, no text);
+		// the accessible name must come from aria-label, never the glyph.
 		expect(left?.getAttribute("aria-label")).toBe("Toggle left sidebar");
 		expect(right?.getAttribute("aria-label")).toBe("Toggle right sidebar");
-		expect(left?.textContent?.trim()).not.toBe("");
-		expect(left?.getAttribute("aria-label")).not.toBe(
-			left?.textContent?.trim(),
-		);
+		const glyph = left?.querySelector("svg");
+		expect(glyph).not.toBeNull();
+		expect(glyph?.getAttribute("aria-hidden")).toBe("true");
+		expect(left?.textContent?.trim()).toBe("");
 	});
 
 	test("both sidebar toggles are now live: their coached chords dispatch", async () => {

apps/ui/src/App.tsx

@@ -14,6 +14,7 @@ import {
 	CoachTipContent,
 	CoachTipTrigger,
 } from "./components/CoachTip";
+import { Glyph } from "./components/Glyph";
 import { LeftSidebar } from "./components/LeftSidebar";
 import { Palette } from "./components/Palette";
 import { RightSidebar } from "./components/RightSidebar";
@@ -77,7 +78,7 @@ const App: Component<RouteSectionProps> = (props) => {
 			<header class="topbar">
 				<div class="brand">
 					<span class="logo" aria-hidden="true">
-						◇
+						<Glyph name="logo" />
 					</span>
 					<span class="title">Compass</span>
 					<span class="subtitle">ADE</span>
@@ -95,7 +96,7 @@ const App: Component<RouteSectionProps> = (props) => {
 							aria-keyshortcuts={bridgeAria}
 						>
 							<span class="tab-glyph" aria-hidden="true">
-								▦
+								<Glyph name="status" />
 							</span>
 							Bridge
 						</CoachTipTrigger>
@@ -146,7 +147,7 @@ const App: Component<RouteSectionProps> = (props) => {
 							)}
 							onClick={() => store.toggleLeft()}
 						>
-							▐
+							<Glyph name="panel-left" />
 						</CoachTipTrigger>
 						<CoachTipContent
 							label="Toggle left sidebar"
@@ -165,7 +166,7 @@ const App: Component<RouteSectionProps> = (props) => {
 							)}
 							onClick={() => store.toggleRight()}
 						>
-							▌
+							<Glyph name="panel-right" />
 						</CoachTipTrigger>
 						<CoachTipContent
 							label="Toggle right sidebar"

apps/ui/src/app.css

@@ -270,7 +270,7 @@
 .folder-caret {
 	color: var(--cx-text-faint);
 	font-size: 9px;
-	width: 10px;
+	width: 11px;
 	display: inline-flex;
 	justify-content: center;
 	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- TODO(motion migration, D9/foundation-T8): raw 0.12s grandfathered by the RIG-2034 cutover lane, which never scoped the motion axis */

apps/ui/src/components/AgentView.tsx

@@ -9,6 +9,7 @@ import {
 } from "../store";
 import type { Agent, Terminal } from "../stub-data";
 import { ChannelView } from "./ChannelView";
+import { Glyph } from "./Glyph";
 import { LogPanel } from "./LogPanel";
 import { RuntimeMarker } from "./RuntimeMarker";
 import { StateDot } from "./StateDot";
@@ -86,7 +87,7 @@ const PaneView: Component<{ pane: Pane; agent: Agent; focused: boolean }> = (
 					aria-label="Split right"
 					onClick={() => splitWith("row")}
 				>
-					⊞▏
+					<Glyph name="split-right" />
 				</button>
 				<button
 					type="button"
@@ -95,7 +96,7 @@ const PaneView: Component<{ pane: Pane; agent: Agent; focused: boolean }> = (
 					aria-label="Split down"
 					onClick={() => splitWith("column")}
 				>
-					⊞▁
+					<Glyph name="split-down" />
 				</button>
 				<Show when={props.pane.kind !== "chat"}>
 					<button
@@ -105,7 +106,7 @@ const PaneView: Component<{ pane: Pane; agent: Agent; focused: boolean }> = (
 						aria-label="Close pane"
 						onClick={() => store.closePane(props.pane.id)}
 					>
-						✕
+						<Glyph name="close" />
 					</button>
 				</Show>
 			</div>
@@ -265,7 +266,7 @@ export const AgentView: Component = () => {
 												title={`Close ${tab.title}`}
 												onClick={() => store.closeTab(tab.id)}
 											>
-												✕
+												<Glyph name="close" />
 											</button>
 										</Show>
 									</div>