feat(ui): add transparent variant to CodeSnippet and idLabel to EntityInfo

ui/components/ui/code-snippet/code-snippet.tsx

@@ -23,6 +23,8 @@ interface CodeSnippetProps {
   formatter?: (value: string) => string;
   /** Enable multiline display (disables truncation, enables word wrap) */
   multiline?: boolean;
+  /** Remove background and border */
+  transparent?: boolean;
   /** Custom aria-label for the copy button */
   ariaLabel?: string;
 }
@@ -34,6 +36,7 @@ export const CodeSnippet = ({
   hideCopyButton = false,
   icon,
   formatter,
+  transparent = false,
   multiline = false,
   ariaLabel = "Copy to clipboard",
 }: CodeSnippetProps) => {
@@ -86,8 +89,15 @@ export const CodeSnippet = ({
   return (
     <div
       className={cn(
-        "bg-bg-neutral-tertiary text-text-neutral-primary border-border-neutral-tertiary flex w-fit min-w-0 items-center gap-1.5 border-2 px-2 py-0.5 text-xs",
-        multiline ? "h-auto rounded-lg" : "h-6 rounded-full",
+        "flex w-fit min-w-0 items-center gap-1.5 text-xs",
+        transparent
+          ? "text-text-neutral-tertiary border-0 bg-transparent px-0 py-0"
+          : "text-text-neutral-primary bg-bg-neutral-tertiary border-border-neutral-tertiary border-2 px-2 py-0.5",
+        multiline
+          ? "h-auto rounded-lg"
+          : transparent
+            ? "h-auto"
+            : "h-6 rounded-full",
         className,
       )}
     >

ui/components/ui/entities/entity-info.tsx

@@ -18,6 +18,8 @@ interface EntityInfoProps {
   entityAlias?: string;
   entityId?: string;
   badge?: string;
+  /** Label before the ID value. Defaults to "UID" */
+  idLabel?: string;
   showCopyAction?: boolean;
   /** @deprecated No longer used — layout handles overflow naturally */
   maxWidth?: string;
@@ -33,6 +35,7 @@ export const EntityInfo = ({
   entityAlias,
   entityId,
   badge,
+  idLabel = "UID",
   showCopyAction = true,
 }: EntityInfoProps) => {
   const canCopy = Boolean(entityId && showCopyAction);
@@ -64,7 +67,7 @@ export const EntityInfo = ({
           {entityId && (
             <div className="flex min-w-0 items-center gap-1">
               <span className="text-text-neutral-tertiary shrink-0 text-xs font-medium">
-                UID:
+                {idLabel}:
               </span>
               <CodeSnippet
                 value={entityId}