fix(ui): namespace tailwind utilities under dg: prefix to stop host-page collisions

packages/ui/src/components/AgentConversation.tsx

@@ -26,13 +26,13 @@ export function AgentConversation({
 
   return (
     <div
-      className={cn("flex-1 min-h-0 overflow-y-auto", className)}
+      className={cn("dg:flex-1 dg:min-h-0 dg:overflow-y-auto", className)}
       style={{ scrollbarWidth: "thin" } as React.CSSProperties}
       data-agent-conversation
       aria-live="polite"
       aria-label="Conversation"
     >
-      <div className="flex flex-col gap-3 p-5 min-h-full">
+      <div className="dg:flex dg:flex-col dg:gap-3 dg:p-5 dg:min-h-full">
         {children}
         <div ref={bottomRef} aria-hidden="true" />
       </div>
@@ -67,28 +67,28 @@ export function AgentMessage({
     <div
       data-role={entry.role}
       className={cn(
-        "flex flex-col gap-1 max-w-[82%]",
-        isUser ? "self-end items-end" : "self-start items-start",
+        "dg:flex dg:flex-col dg:gap-1 dg:max-w-[82%]",
+        isUser ? "dg:self-end dg:items-end" : "dg:self-start dg:items-start",
         className,
       )}
     >
       {/* Role label */}
       {showRole && (
-        <span className="text-[10px] font-semibold uppercase tracking-widest opacity-50 px-1">
+        <span className="dg:text-[10px] dg:font-semibold dg:uppercase dg:tracking-widest dg:opacity-50 dg:px-1">
           {isUser ? "You" : "Agent"}
         </span>
       )}
 
       {/* Avatar + bubble */}
       <div className={cn(
-        "flex items-end gap-2",
-        isUser ? "flex-row-reverse" : "flex-row",
+        "dg:flex dg:items-end dg:gap-2",
+        isUser ? "dg:flex-row-reverse" : "dg:flex-row",
       )}>
         {/* Gradient avatar — assistant only */}
         {!isUser && (
           <div
             aria-hidden="true"
-            className="size-6 rounded-full shrink-0 flex items-center justify-center mb-px bg-gradient-to-br from-primary to-[#149afb]"
+            className="dg:size-6 dg:rounded-full dg:shrink-0 dg:flex dg:items-center dg:justify-center dg:mb-px dg:bg-gradient-to-br dg:from-primary dg:to-[#149afb]"
           >
             <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true">
               <path d="M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3Z" fill="white"/>
@@ -100,18 +100,18 @@ export function AgentMessage({
 
         {/* Bubble */}
         <div className={cn(
-          "px-4 py-3 text-sm leading-normal break-words border text-foreground",
+          "dg:px-4 dg:py-3 dg:text-sm dg:leading-normal dg:break-words dg:border dg:text-foreground",
           isUser
-            ? "rounded-2xl rounded-br-sm bg-[var(--msg-user-bg)] border-[var(--msg-user-border)]"
-            : "rounded-2xl rounded-bl-sm bg-card border-border shadow-sm",
+            ? "dg:rounded-2xl dg:rounded-br-sm dg:bg-[var(--msg-user-bg)] dg:border-[var(--msg-user-border)]"
+            : "dg:rounded-2xl dg:rounded-bl-sm dg:bg-card dg:border-border dg:shadow-sm",
         )}>
           {children ?? entry.content}
         </div>
       </div>
 
       {/* Timestamp */}
       {showTimestamp && entry.timestamp && (
-        <span className="text-[10px] opacity-40 px-1 tabular-nums">
+        <span className="dg:text-[10px] dg:opacity-40 dg:px-1 dg:tabular-nums">
           {formatTime(entry.timestamp)}
         </span>
       )}

packages/ui/src/components/AgentMicrophoneButton.tsx

@@ -30,11 +30,11 @@ const MicOffIcon = () => (
 );
 
 const toggleClasses = cn(
-  "h-10 w-10 shrink-0 rounded-[calc(var(--radius)-6px)] border border-border bg-card text-foreground",
-  "hover:bg-accent hover:text-accent-foreground",
-  "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary",
-  "data-[state=on]:hover:bg-[var(--primary-hover)]",
-  "data-[state=off]:text-muted-foreground",
+  "dg:h-10 dg:w-10 dg:shrink-0 dg:rounded-[calc(var(--radius)-6px)] dg:border dg:border-border dg:bg-card dg:text-foreground",
+  "dg:hover:bg-accent dg:hover:text-accent-foreground",
+  "dg:data-[state=on]:bg-primary dg:data-[state=on]:text-primary-foreground dg:data-[state=on]:border-primary",
+  "dg:data-[state=on]:hover:bg-[var(--primary-hover)]",
+  "dg:data-[state=off]:text-muted-foreground",
 );
 
 export function AgentMicrophoneButton({

packages/ui/src/components/AgentSpeakerButton.tsx

@@ -44,11 +44,11 @@ export function AgentSpeakerButton({
       data-agent-speaker-button
       data-state={outputMuted ? "muted" : "active"}
       className={cn(
-        "h-10 w-10 shrink-0 rounded-[calc(var(--radius)-6px)] border border-border bg-card text-foreground",
-        "hover:bg-accent hover:text-accent-foreground",
-        "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary",
-        "data-[state=on]:hover:bg-[var(--primary-hover)]",
-        "data-[state=off]:text-muted-foreground",
+        "dg:h-10 dg:w-10 dg:shrink-0 dg:rounded-[calc(var(--radius)-6px)] dg:border dg:border-border dg:bg-card dg:text-foreground",
+        "dg:hover:bg-accent dg:hover:text-accent-foreground",
+        "dg:data-[state=on]:bg-primary dg:data-[state=on]:text-primary-foreground dg:data-[state=on]:border-primary",
+        "dg:data-[state=on]:hover:bg-[var(--primary-hover)]",
+        "dg:data-[state=off]:text-muted-foreground",
         className
       )}
     >

packages/ui/src/components/AgentStartButton.tsx

@@ -53,8 +53,8 @@ export function AgentStartButton({
       aria-label={typeof label === "string" ? label : "Start agent"}
       onClick={handleClick}
       className={cn(
-        "w-full font-semibold",
-        !isGhost && "hover:bg-[var(--primary-hover)] active:bg-[var(--primary-active)]",
+        "dg:w-full dg:font-semibold",
+        !isGhost && "dg:hover:bg-[var(--primary-hover)] dg:active:bg-[var(--primary-active)]",
         className
       )}
     >

packages/ui/src/components/AgentStatus.tsx

@@ -19,7 +19,7 @@ export function AgentStatus({ className, labels }: AgentStatusProps) {
   const label = { ...DEFAULT_LABELS, ...labels }[state] ?? state;
   return (
     <span
-      className={cn("flex items-center gap-1.5 text-xs text-muted-foreground", className)}
+      className={cn("dg:flex dg:items-center dg:gap-1.5 dg:text-xs dg:text-muted-foreground", className)}
       data-agent-status
       data-state={state}
       aria-live="polite"

packages/ui/src/components/AgentTextInput.tsx

@@ -41,7 +41,7 @@ export function AgentTextInput({
   const isDisabled = disabled || !isActive;
 
   return (
-    <div className={cn("flex items-center gap-2 flex-1", className)} data-agent-text-input>
+    <div className={cn("dg:flex dg:items-center dg:gap-2 dg:flex-1", className)} data-agent-text-input>
       <Textarea
         value={value}
         onChange={(e) => setValue(e.target.value)}
@@ -52,7 +52,7 @@ export function AgentTextInput({
         disabled={isDisabled}
         aria-label="Message input"
         rows={1}
-        className="min-h-[42px] max-h-[120px] resize-none py-2.5 text-sm"
+        className="dg:min-h-[42px] dg:max-h-[120px] dg:resize-none dg:py-2.5 dg:text-sm"
       />
       {submitButton !== undefined ? (
         <Button
@@ -61,7 +61,7 @@ export function AgentTextInput({
           onClick={handleSend}
           disabled={isDisabled || !value.trim()}
           aria-label="Send"
-          className="shrink-0 text-muted-foreground hover:text-primary"
+          className="dg:shrink-0 dg:text-muted-foreground dg:hover:text-primary"
         >
           {submitButton}
         </Button>
@@ -72,7 +72,7 @@ export function AgentTextInput({
           onClick={handleSend}
           disabled={isDisabled || !value.trim()}
           aria-label="Send"
-          className="shrink-0 text-muted-foreground hover:text-primary"
+          className="dg:shrink-0 dg:text-muted-foreground dg:hover:text-primary"
         >
           <SendIcon />
         </Button>

packages/ui/src/components/MicSelector.tsx

@@ -86,7 +86,7 @@ export function MicSelector({
       disabled={disabled || loading}
     >
       <SelectTrigger
-        className={cn("text-sm", className)}
+        className={cn("dg:text-sm", className)}
         data-agent-mic-selector
         aria-label="Select microphone"
       >

packages/ui/src/components/Response.tsx

@@ -28,9 +28,9 @@ export function Response({ children, className }: ResponseProps) {
   return (
     <div
       className={cn(
-        "prose prose-sm dark:prose-invert max-w-none",
-        "prose-a:text-primary prose-code:text-foreground",
-        "prose-pre:bg-input prose-pre:border prose-pre:border-border",
+        "dg:prose dg:prose-sm dg:dark:prose-invert dg:max-w-none",
+        "dg:prose-a:text-primary dg:prose-code:text-foreground",
+        "dg:prose-pre:bg-input dg:prose-pre:border dg:prose-pre:border-border",
         className
       )}
       data-agent-response

packages/ui/src/components/VoiceButton.tsx

@@ -64,27 +64,27 @@ export function VoiceButton({ className, labels, onClick }: VoiceButtonProps) {
       onClick={handleClick}
       className={cn(
         // Base layout — override Button default sizing
-        "inline-flex items-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold h-auto",
+        "dg:inline-flex dg:items-center dg:gap-2.5 dg:px-7 dg:py-3.5 dg:text-[15px] dg:font-semibold dg:h-auto",
         // Idle / base
-        "border border-border bg-card text-foreground",
-        "hover:bg-accent hover:border-primary",
-        "active:bg-[var(--accent-active)]",
-        "focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2",
+        "dg:border dg:border-border dg:bg-card dg:text-foreground",
+        "dg:hover:bg-accent dg:hover:border-primary",
+        "dg:active:bg-[var(--accent-active)]",
+        "dg:focus-visible:outline-2 dg:focus-visible:outline-primary dg:focus-visible:outline-offset-2",
         // Connecting — subtle pulse
-        voiceState === "connecting" && "animate-dg-pulse-fast",
+        voiceState === "connecting" && "dg:animate-dg-pulse-fast",
         // Listening — accent border glow (box-shadow rule lives in @layer components)
-        voiceState === "listening" && "border-primary",
+        voiceState === "listening" && "dg:border-primary",
         // Speaking — primary fill, pulse
         voiceState === "speaking" && [
-          "bg-primary text-primary-foreground border-primary",
-          "hover:bg-[var(--primary-hover)]",
-          "animate-dg-pulse-slow",
-          "[&_svg]:stroke-primary-foreground",
+          "dg:bg-primary dg:text-primary-foreground dg:border-primary",
+          "dg:hover:bg-[var(--primary-hover)]",
+          "dg:animate-dg-pulse-slow",
+          "dg:[&_svg]:stroke-primary-foreground",
         ],
         // Error (reserved for future use — exposed via data-voice-state for consumer styling)
-        (voiceState as string) === "error" && "border-destructive text-destructive hover:border-destructive",
+        (voiceState as string) === "error" && "dg:border-destructive dg:text-destructive dg:hover:border-destructive",
         // Connecting disabled cursor
-        isConnecting && "cursor-wait",
+        isConnecting && "dg:cursor-wait",
         className
       )}
     >

packages/ui/src/components/ui/button.tsx

@@ -5,22 +5,22 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "dg:inline-flex dg:items-center dg:justify-center dg:gap-2 dg:whitespace-nowrap dg:rounded-md dg:text-sm dg:font-medium dg:transition-colors dg:focus-visible:outline-none dg:focus-visible:ring-1 dg:focus-visible:ring-ring dg:disabled:pointer-events-none dg:disabled:opacity-50 dg:[&_svg]:pointer-events-none dg:[&_svg]:size-4 dg:[&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: "dg:bg-primary dg:text-primary-foreground dg:shadow dg:hover:bg-primary/90",
+        destructive: "dg:bg-destructive dg:text-destructive-foreground dg:shadow-sm dg:hover:bg-destructive/90",
+        outline: "dg:border dg:border-input dg:bg-background dg:shadow-sm dg:hover:bg-accent dg:hover:text-accent-foreground",
+        secondary: "dg:bg-secondary dg:text-secondary-foreground dg:shadow-sm dg:hover:bg-secondary/80",
+        ghost: "dg:hover:bg-accent dg:hover:text-accent-foreground",
+        link: "dg:text-primary dg:underline-offset-4 dg:hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "dg:h-9 dg:px-4 dg:py-2",
+        sm: "dg:h-8 dg:rounded-md dg:px-3 dg:text-xs",
+        lg: "dg:h-10 dg:rounded-md dg:px-8",
+        icon: "dg:h-9 dg:w-9",
       },
     },
     defaultVariants: {

packages/ui/src/components/ui/scroll-area.tsx

@@ -11,10 +11,10 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn("dg:relative dg:overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="dg:h-full dg:w-full dg:rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -31,14 +31,14 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      "dg:flex dg:touch-none dg:select-none dg:transition-colors",
+      orientation === "vertical" && "dg:h-full dg:w-2.5 dg:border-l dg:border-l-transparent dg:p-[1px]",
+      orientation === "horizontal" && "dg:h-2.5 dg:flex-col dg:border-t dg:border-t-transparent dg:p-[1px]",
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="dg:relative dg:flex-1 dg:rounded-full dg:bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;