style(web): theme-safe colours and one source for brand accents

apps/web/src/page/agent-sessions/session/tool-io.ts

@@ -161,7 +161,7 @@ const ioHalf = (h: H, model: Model, half: Half): Html =>
 			h.Class(
 				cn(
 					"flex items-stretch",
-					half.direction === "in" ? "bg-black/[0.06]" : "border-border/60 border-t",
+					half.direction === "in" ? "bg-muted/50" : "border-border/60 border-t",
 					half.direction === "out" && half.isFailed && "bg-severity-error/5",
 				),
 			),

apps/web/src/page/infra-integrations/kit/integration-empty.ts

@@ -8,8 +8,6 @@ import { panel } from "../../../ui/panel"
 
 // `IntegrationEmpty` and its parts and `IntegrationIconPlate`.
 
-export const RAILWAY_ACCENT = "#0B0D0E"
-
 export type IntegrationBrand = Readonly<{
 	icon: IconName
 	/** A monochrome twin for the dimmed backer plates (multicolour marks). */

apps/web/src/page/infra-integrations/railway/list/view.ts

@@ -13,7 +13,8 @@ import { dashboardPage } from "../../../kit/dashboard-page"
 import { timeControls } from "../../../kit/time-controls"
 import * as TimeRangePicker from "../../../kit/time-range-picker"
 import { integrationNotConnected } from "../../kit/empty-states"
-import { integrationConnectCta, RAILWAY_ACCENT } from "../../kit/integration-empty"
+import { RAILWAY_ACCENT } from "../../../integrations/catalog"
+import { integrationConnectCta } from "../../kit/integration-empty"
 import { AppRoute, hrefOf } from "../../../../route"
 import { filteredEmpty } from "../../../kit/signal-empty-state"
 import { avgPeakContent } from "../../../infra/kit/avg-peak"

apps/web/src/page/integrations/view-railway.ts

@@ -8,7 +8,7 @@ import { spinner } from "../../ui/spinner"
 import { truncatedText } from "../../ui/truncated-text"
 import { columnHead, dataTable, dataTableEmpty } from "../infra/kit/data-table"
 import { relativeTime } from "../kit/relative-time"
-import { RAILWAY_ACCENT } from "../infra-integrations/kit/integration-empty"
+import { RAILWAY_ACCENT } from "./catalog"
 import { railwayTokenForm } from "./view-railway-token"
 import { integrationNotice } from "./kit/notice"
 import { Message } from "./message"

apps/web/src/page/traces/detail/span-panel/platform.ts

@@ -1,3 +1,4 @@
+import { CLOUDFLARE_ACCENT_CLASS, dbSystemAccentClass } from "@maple/ui/lib/cloud-platforms/accents"
 import type { IconName } from "../../../../ui/icon"
 
 // copied: packages/ui/src/lib/cloud-platforms/{types,cloudflare,database}.ts with `Icon` as an
@@ -68,7 +69,7 @@ const cloudflare = (attrs: Attrs): PlatformInfo | null => {
 	return {
 		label: "Cloudflare Worker",
 		icon: "CloudflareIcon",
-		accentClassName: "text-[#F38020]",
+		accentClassName: CLOUDFLARE_ACCENT_CLASS,
 		edge: joinEdge(pickAttr(attrs, "cloudflare.colo"), pickAttr(attrs, "faas.invoked_region")),
 		location: [city, country].filter(Boolean).join(", ") || null,
 		outcome: outcome === null ? null : { value: outcome, bad: outcome.toLowerCase() !== "ok" },
@@ -112,29 +113,6 @@ const DB_SYSTEM_LABELS = new Map(
 	}),
 )
 
-const DB_SYSTEM_ACCENTS = new Map(
-	Object.entries({
-		postgresql: "text-[#336791]",
-		mysql: "text-[#00758F]",
-		mariadb: "text-[#1F7A8C]",
-		clickhouse: "text-[#F5B400]",
-		redis: "text-[#DC382D]",
-		mongodb: "text-[#13AA52]",
-		elasticsearch: "text-[#00BFB3]",
-		opensearch: "text-[#00BFB3]",
-		cassandra: "text-[#1287B1]",
-		cockroachdb: "text-[#6933FF]",
-		sqlite: "text-[#0F80CC]",
-		oracle: "text-[#C74634]",
-		mssql: "text-[#CC2927]",
-		"microsoft.sql_server": "text-[#CC2927]",
-		dynamodb: "text-[#4053D6]",
-		"aws.dynamodb": "text-[#4053D6]",
-		redshift: "text-[#8C4FFF]",
-		snowflake: "text-[#29B5E8]",
-	}),
-)
-
 const humanizeDbSystem = (system: string): string =>
 	DB_SYSTEM_LABELS.get(system.toLowerCase()) ??
 	(system.split(".").pop() ?? system)
@@ -173,7 +151,7 @@ const database = (attrs: Attrs): PlatformInfo | null => {
 	return {
 		label: humanizeDbSystem(system),
 		icon: "DatabaseIcon",
-		accentClassName: DB_SYSTEM_ACCENTS.get(system.toLowerCase()) ?? "text-muted-foreground",
+		accentClassName: dbSystemAccentClass(system),
 		edge: null,
 		location: null,
 		outcome: errorType === null ? null : { value: errorType, bad: true },

apps/web/src/page/traces/detail/waterfall/platform.ts

@@ -1,31 +1,9 @@
+import { CLOUDFLARE_ACCENT_CLASS, dbSystemAccentClass } from "@maple/ui/lib/cloud-platforms/accents"
 import { getCloudPlatform, pickAttr } from "../../../../service-map/trace-flow/cloud-platforms"
 import type { IconName } from "../../../../ui/icon"
 
 // The `CloudPlatformInfo` fields a span row reads. The flow port's copy of the adapters gives
-// label, icon, edge and outcome; accent and location are copied from
-// packages/ui/src/lib/cloud-platforms/{database,cloudflare}.ts (they import React icons).
-
-// copied: DB_SYSTEM_ACCENTS (database.ts).
-const DB_SYSTEM_ACCENTS = new Map([
-	["postgresql", "text-[#336791]"],
-	["mysql", "text-[#00758F]"],
-	["mariadb", "text-[#1F7A8C]"],
-	["clickhouse", "text-[#F5B400]"],
-	["redis", "text-[#DC382D]"],
-	["mongodb", "text-[#13AA52]"],
-	["elasticsearch", "text-[#00BFB3]"],
-	["opensearch", "text-[#00BFB3]"],
-	["cassandra", "text-[#1287B1]"],
-	["cockroachdb", "text-[#6933FF]"],
-	["sqlite", "text-[#0F80CC]"],
-	["oracle", "text-[#C74634]"],
-	["mssql", "text-[#CC2927]"],
-	["microsoft.sql_server", "text-[#CC2927]"],
-	["dynamodb", "text-[#4053D6]"],
-	["aws.dynamodb", "text-[#4053D6]"],
-	["redshift", "text-[#8C4FFF]"],
-	["snowflake", "text-[#29B5E8]"],
-])
+// label, icon, edge and outcome; the accents come from the shared @maple/ui module.
 
 export interface RowPlatform {
 	readonly label: string
@@ -43,12 +21,16 @@ export const rowPlatform = (attrs: Record<string, string>): RowPlatform | null =
 		const location = [pickAttr(attrs, "geo.locality.name"), pickAttr(attrs, "geo.country.code")]
 			.filter((part) => part !== null && part !== "")
 			.join(", ")
-		return { ...platform, accentClassName: "text-[#F38020]", location: location === "" ? null : location }
+		return {
+			...platform,
+			accentClassName: CLOUDFLARE_ACCENT_CLASS,
+			location: location === "" ? null : location,
+		}
 	}
 	const system = (pickAttr(attrs, "db.system.name", "db.system") ?? "").toLowerCase()
 	return {
 		...platform,
-		accentClassName: DB_SYSTEM_ACCENTS.get(system) ?? "text-muted-foreground",
+		accentClassName: dbSystemAccentClass(system),
 		location: null,
 	}
 }

packages/ui/src/lib/cloud-platforms/accents.ts

@@ -0,0 +1,29 @@
+// Brand accents for the trace platform annotations. Kept free of React imports so the Foldkit
+// dashboard reads the same values as the React adapters instead of copying them.
+
+export const CLOUDFLARE_ACCENT_CLASS = "text-[#F38020]"
+
+// Brand-ish accent per `db.system`; a small tint on the 12px icon, muted otherwise.
+const DB_SYSTEM_ACCENTS: ReadonlyMap<string, string> = new Map([
+	["postgresql", "text-[#336791]"],
+	["mysql", "text-[#00758F]"],
+	["mariadb", "text-[#1F7A8C]"],
+	["clickhouse", "text-[#F5B400]"],
+	["redis", "text-[#DC382D]"],
+	["mongodb", "text-[#13AA52]"],
+	["elasticsearch", "text-[#00BFB3]"],
+	["opensearch", "text-[#00BFB3]"],
+	["cassandra", "text-[#1287B1]"],
+	["cockroachdb", "text-[#6933FF]"],
+	["sqlite", "text-[#0F80CC]"],
+	["oracle", "text-[#C74634]"],
+	["mssql", "text-[#CC2927]"],
+	["microsoft.sql_server", "text-[#CC2927]"],
+	["dynamodb", "text-[#4053D6]"],
+	["aws.dynamodb", "text-[#4053D6]"],
+	["redshift", "text-[#8C4FFF]"],
+	["snowflake", "text-[#29B5E8]"],
+])
+
+export const dbSystemAccentClass = (system: string): string =>
+	DB_SYSTEM_ACCENTS.get(system.toLowerCase()) ?? "text-muted-foreground"

packages/ui/src/lib/cloud-platforms/cloudflare.ts

@@ -1,6 +1,7 @@
 import { CloudflareIcon } from "../../components/icons"
 import type { CloudPlatformAdapter, CloudPlatformField } from "./types"
 import { joinEdge, pickAttr } from "./types"
+import { CLOUDFLARE_ACCENT_CLASS } from "./accents"
 
 // Cloudflare Workers Observability annotations. Worker traces come from CF's
 // native pipeline (`scope.name: workers-observability`), so they carry a
@@ -52,7 +53,7 @@ export const cloudflareAdapter: CloudPlatformAdapter = {
 			label: "Cloudflare Worker",
 			kind: "Worker",
 			Icon: CloudflareIcon,
-			accentClassName: "text-[#F38020]",
+			accentClassName: CLOUDFLARE_ACCENT_CLASS,
 			edge: joinEdge(pickAttr(attrs, "cloudflare.colo"), pickAttr(attrs, "faas.invoked_region")),
 			location: [city, country].filter(Boolean).join(", ") || null,
 			outcome: outcome ? { value: outcome, bad: outcome.toLowerCase() !== "ok" } : null,

packages/ui/src/lib/cloud-platforms/database.ts

@@ -1,4 +1,5 @@
 import { DatabaseIcon } from "../../components/icons"
+import { dbSystemAccentClass } from "./accents"
 import type { CloudPlatformAdapter, CloudPlatformField } from "./types"
 import { pickAttr } from "./types"
 
@@ -47,28 +48,6 @@ const DB_SYSTEM_LABELS: Record<string, string> = {
 	spanner: "Spanner",
 } satisfies Record<string, string>
 
-/** Brand-ish accent per system; a small tint on the 12px icon, muted otherwise. */
-const DB_SYSTEM_ACCENTS: Record<string, string> = {
-	postgresql: "text-[#336791]",
-	mysql: "text-[#00758F]",
-	mariadb: "text-[#1F7A8C]",
-	clickhouse: "text-[#F5B400]",
-	redis: "text-[#DC382D]",
-	mongodb: "text-[#13AA52]",
-	elasticsearch: "text-[#00BFB3]",
-	opensearch: "text-[#00BFB3]",
-	cassandra: "text-[#1287B1]",
-	cockroachdb: "text-[#6933FF]",
-	sqlite: "text-[#0F80CC]",
-	oracle: "text-[#C74634]",
-	mssql: "text-[#CC2927]",
-	"microsoft.sql_server": "text-[#CC2927]",
-	dynamodb: "text-[#4053D6]",
-	"aws.dynamodb": "text-[#4053D6]",
-	redshift: "text-[#8C4FFF]",
-	snowflake: "text-[#29B5E8]",
-} satisfies Record<string, string>
-
 /** "microsoft.sql_server" → "SQL Server"; unknown → title-cased last segment. */
 function humanizeDbSystem(system: string): string {
 	const known = DB_SYSTEM_LABELS[system.toLowerCase()]
@@ -123,7 +102,7 @@ export const databaseAdapter: CloudPlatformAdapter = {
 			label: humanizeDbSystem(system),
 			kind: "Query",
 			Icon: DatabaseIcon,
-			accentClassName: DB_SYSTEM_ACCENTS[system.toLowerCase()] ?? "text-muted-foreground",
+			accentClassName: dbSystemAccentClass(system),
 			edge: null,
 			location: null,
 			outcome,