diff --git a/apps/web/src/page/agent-sessions/session/tool-io.ts b/apps/web/src/page/agent-sessions/session/tool-io.ts index fcdce0d0b0..5b828c8341 100644 --- a/apps/web/src/page/agent-sessions/session/tool-io.ts +++ b/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", ), ), diff --git a/apps/web/src/page/infra-integrations/kit/integration-empty.ts b/apps/web/src/page/infra-integrations/kit/integration-empty.ts index a8ccd6f970..bed982f5b5 100644 --- a/apps/web/src/page/infra-integrations/kit/integration-empty.ts +++ b/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). */ diff --git a/apps/web/src/page/infra-integrations/railway/list/view.ts b/apps/web/src/page/infra-integrations/railway/list/view.ts index 77f27c874b..7ec497210f 100644 --- a/apps/web/src/page/infra-integrations/railway/list/view.ts +++ b/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" diff --git a/apps/web/src/page/integrations/view-railway.ts b/apps/web/src/page/integrations/view-railway.ts index 3abb558c77..c7c04dadbf 100644 --- a/apps/web/src/page/integrations/view-railway.ts +++ b/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" diff --git a/apps/web/src/page/traces/detail/span-panel/platform.ts b/apps/web/src/page/traces/detail/span-panel/platform.ts index 353342a59e..4b8a8aba89 100644 --- a/apps/web/src/page/traces/detail/span-panel/platform.ts +++ b/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 }, diff --git a/apps/web/src/page/traces/detail/waterfall/platform.ts b/apps/web/src/page/traces/detail/waterfall/platform.ts index 913749f510..3c45e5cd90 100644 --- a/apps/web/src/page/traces/detail/waterfall/platform.ts +++ b/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): 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, } } diff --git a/packages/ui/src/lib/cloud-platforms/accents.ts b/packages/ui/src/lib/cloud-platforms/accents.ts new file mode 100644 index 0000000000..eb30a280e4 --- /dev/null +++ b/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 = 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" diff --git a/packages/ui/src/lib/cloud-platforms/cloudflare.ts b/packages/ui/src/lib/cloud-platforms/cloudflare.ts index 276b249e11..259255fb79 100644 --- a/packages/ui/src/lib/cloud-platforms/cloudflare.ts +++ b/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, diff --git a/packages/ui/src/lib/cloud-platforms/database.ts b/packages/ui/src/lib/cloud-platforms/database.ts index 1db8ba580b..7e435afa75 100644 --- a/packages/ui/src/lib/cloud-platforms/database.ts +++ b/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 = { spanner: "Spanner", } satisfies Record -/** Brand-ish accent per system; a small tint on the 12px icon, muted otherwise. */ -const DB_SYSTEM_ACCENTS: Record = { - 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 - /** "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,