Allow span icons to be determined based on the span name (e.g. prisma:)

Author: ericallam

apps/webapp/app/components/runs/v3/RunIcon.tsx

@@ -12,10 +12,30 @@ import { cn } from "~/utils/cn";
 
 type TaskIconProps = {
   name: string | undefined;
+  spanName: string;
   className?: string;
 };
 
-export function RunIcon({ name, className }: TaskIconProps) {
+type SpanNameIcons = {
+  matcher: RegExp;
+  iconName: string;
+};
+
+const spanNameIcons: SpanNameIcons[] = [{ matcher: /^prisma:/, iconName: "brand-prisma" }];
+
+export function RunIcon({ name, className, spanName }: TaskIconProps) {
+  const spanNameIcon = spanNameIcons.find(({ matcher }) => matcher.test(spanName));
+
+  if (spanNameIcon) {
+    return (
+      <NamedIcon
+        name={spanNameIcon.iconName}
+        className={cn(className)}
+        fallback={<InformationCircleIcon className={cn(className, "text-text-dimmed")} />}
+      />
+    );
+  }
+
   if (!name) return <Squares2X2Icon className={cn(className, "text-text-dimmed")} />;
 
   switch (name) {

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -60,7 +60,11 @@ export default function Page() {
     >
       <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
         <div className="flex items-center gap-1 overflow-x-hidden">
-          <RunIcon name={event.style?.icon} className="h-4 min-h-4 w-4 min-w-4" />
+          <RunIcon
+            name={event.style?.icon}
+            spanName={event.message}
+            className="h-4 min-h-4 w-4 min-w-4"
+          />
           <Header2 className={cn("whitespace-nowrap")}>
             <SpanTitle {...event} size="large" />
           </Header2>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -362,7 +362,11 @@ function TasksTreeView({
 
                   <div className="flex w-full items-center justify-between gap-2 pl-1">
                     <div className="flex items-center gap-2 overflow-x-hidden">
-                      <RunIcon name={node.data.style?.icon} className="h-4 min-h-4 w-4 min-w-4" />
+                      <RunIcon
+                        name={node.data.style?.icon}
+                        spanName={node.data.message}
+                        className="h-4 min-h-4 w-4 min-w-4"
+                      />
                       <NodeText node={node} />
                       {node.data.isRoot && <Badge variant="outline-rounded">Root</Badge>}
                     </div>