@elizaos/client 1.5.5-alpha.10

package/src/components/ui/alert-dialog.cy.tsx

@@ -0,0 +1,333 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog';
+import { Button } from './button';
+
+describe('AlertDialog Component', () => {
+  it('renders basic alert dialog', () => {
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive">Delete Item</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your account and remove
+              your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    cy.contains('button', 'Delete Item').should('be.visible');
+    cy.contains('Are you absolutely sure?').should('not.exist');
+
+    // Open dialog
+    cy.contains('button', 'Delete Item').click();
+    cy.contains('Are you absolutely sure?').should('be.visible');
+    cy.contains('This action cannot be undone').should('be.visible');
+  });
+
+  it('handles action button click', () => {
+    const onAction = cy.stub();
+
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger>Delete</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this item?
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={onAction}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    // Open the dialog
+    cy.contains('Delete').click();
+
+    // Wait for dialog to appear and ensure it's visible
+    cy.contains('Confirm Deletion').should('be.visible');
+
+    // Try clicking the specific action button using a more precise selector
+    cy.get('[role="alertdialog"]').within(() => {
+      cy.contains('button', 'Delete').click({ force: true });
+    });
+    cy.wrap(onAction).should('have.been.called');
+
+    // Dialog should close
+    cy.contains('Confirm Deletion').should('not.exist');
+  });
+
+  it('handles cancel button click', () => {
+    const onCancel = cy.stub();
+
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger>Show Alert</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Warning</AlertDialogTitle>
+          <AlertDialogDescription>This is a warning message.</AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
+            <AlertDialogAction>OK</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    cy.contains('Show Alert').click();
+    cy.contains('button', 'Cancel').click({ force: true });
+    cy.wrap(onCancel).should('have.been.called');
+
+    // Dialog should close
+    cy.contains('Warning').should('not.exist');
+  });
+
+  it('works as controlled component', () => {
+    const TestComponent = () => {
+      const [open, setOpen] = React.useState(false);
+      const [confirmed, setConfirmed] = React.useState(false);
+
+      return (
+        <div>
+          <button onClick={() => setOpen(true)}>Open Alert</button>
+          <p>Confirmed: {confirmed ? 'Yes' : 'No'}</p>
+
+          <AlertDialog open={open} onOpenChange={setOpen}>
+            <AlertDialogContent>
+              <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+              <AlertDialogDescription>Do you want to proceed?</AlertDialogDescription>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => {
+                    setConfirmed(true);
+                    setOpen(false);
+                  }}
+                >
+                  Confirm
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    cy.contains('Confirmed: No').should('be.visible');
+    cy.contains('Open Alert').click();
+    cy.contains('Confirm Action').should('be.visible');
+
+    cy.contains('button', 'Confirm').click({ force: true });
+    cy.contains('Confirmed: Yes').should('be.visible');
+    cy.contains('Confirm Action').should('not.exist');
+  });
+
+  it('prevents closing on escape by default', () => {
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger>Important Action</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Critical Decision</AlertDialogTitle>
+          <AlertDialogDescription>This requires your explicit action.</AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Proceed</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    cy.contains('Important Action').click();
+    cy.contains('Critical Decision').should('be.visible');
+
+    // Try to close with ESC
+    cy.get('body').type('{esc}');
+    cy.contains('Critical Decision').should('be.visible');
+  });
+
+  it('supports custom className', () => {
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger className="custom-trigger">Open</AlertDialogTrigger>
+        <AlertDialogContent className="bg-red-50 custom-content">
+          <AlertDialogTitle className="text-red-900">Error</AlertDialogTitle>
+          <AlertDialogDescription className="text-red-700">
+            Something went wrong!
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogAction className="bg-red-600">OK</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    cy.get('.custom-trigger').should('exist');
+    cy.contains('Open').click();
+    cy.get('.custom-content').should('have.class', 'bg-red-50');
+    cy.get('.text-red-900').should('contain', 'Error');
+  });
+
+  it('handles async operations', () => {
+    const TestComponent = () => {
+      const [loading, setLoading] = React.useState(false);
+      const [open, setOpen] = React.useState(false);
+
+      const handleDelete = async () => {
+        setLoading(true);
+        // Simulate async operation
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        setLoading(false);
+        setOpen(false);
+      };
+
+      return (
+        <AlertDialog open={open} onOpenChange={setOpen}>
+          <AlertDialogTrigger asChild>
+            <Button>Delete</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogTitle>Delete Item</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this item?
+            </AlertDialogDescription>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={handleDelete} disabled={loading}>
+                {loading ? 'Deleting...' : 'Delete'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    // Open the dialog
+    cy.contains('button', 'Delete').click();
+
+    // Wait for dialog content to appear
+    cy.contains('Delete Item').should('be.visible');
+
+    // Click the action button within the dialog
+    cy.get('[role="alertdialog"]').within(() => {
+      cy.contains('button', 'Delete').click({ force: true });
+    });
+    cy.contains('Deleting...').should('be.visible');
+    cy.wait(150);
+    cy.contains('Delete Item').should('not.exist');
+  });
+
+  it('supports warning variant styling', () => {
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger>
+          <Button variant="outline">Show Warning</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>⚠️ Warning</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action may have unintended consequences.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Go Back</AlertDialogCancel>
+            <AlertDialogAction className="bg-yellow-600 hover:bg-yellow-700">
+              I Understand
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    cy.contains('Show Warning').click();
+    cy.contains('⚠️ Warning').should('be.visible');
+    cy.get('.bg-yellow-600').should('contain', 'I Understand');
+  });
+
+  it('handles multiple dialogs', () => {
+    cy.mount(
+      <div className="space-x-4">
+        <AlertDialog>
+          <AlertDialogTrigger>First Dialog</AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogTitle>First Alert</AlertDialogTitle>
+            <AlertDialogFooter>
+              <AlertDialogAction>OK</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        <AlertDialog>
+          <AlertDialogTrigger>Second Dialog</AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogTitle>Second Alert</AlertDialogTitle>
+            <AlertDialogFooter>
+              <AlertDialogAction>OK</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    );
+
+    // Open first dialog
+    cy.contains('First Dialog').click();
+    cy.contains('First Alert').should('be.visible');
+    cy.contains('button', 'OK').click();
+
+    // Open second dialog
+    cy.contains('Second Dialog').click();
+    cy.contains('Second Alert').should('be.visible');
+  });
+
+  it('maintains focus management', () => {
+    cy.mount(
+      <AlertDialog>
+        <AlertDialogTrigger>Open Alert</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Focus Test</AlertDialogTitle>
+          <AlertDialogDescription>
+            Focus should be trapped within the dialog.
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Confirm</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    cy.contains('Open Alert').click();
+
+    // Focus should be within dialog
+    cy.focused().should('exist');
+  });
+});

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.cy.tsx

@@ -0,0 +1,180 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+
+describe('Avatar Component', () => {
+  it('renders image correctly', () => {
+    cy.mount(
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="avatar"]').should('exist');
+    cy.get('[data-testid="avatar-image"]').should(
+      'have.attr',
+      'src',
+      'https://github.com/shadcn.png'
+    );
+    cy.get('[data-testid="avatar-image"]').should('have.attr', 'alt', '@shadcn');
+  });
+
+  it('shows fallback when image fails to load', () => {
+    cy.mount(
+      <Avatar>
+        <AvatarImage src="https://broken-image-url.com/404.png" alt="broken" />
+        <AvatarFallback>FB</AvatarFallback>
+      </Avatar>
+    );
+
+    // Wait for image to fail loading
+    cy.wait(500);
+    cy.get('[data-testid="avatar-fallback"]').should('be.visible');
+    cy.get('[data-testid="avatar-fallback"]').should('contain', 'FB');
+  });
+
+  it('renders fallback only when no image provided', () => {
+    cy.mount(
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="avatar-fallback"]').should('be.visible');
+    cy.get('[data-testid="avatar-fallback"]').should('contain', 'JD');
+    cy.get('[data-testid="avatar-image"]').should('not.exist');
+  });
+
+  it('applies custom className to avatar', () => {
+    cy.mount(
+      <Avatar className="w-20 h-20">
+        <AvatarFallback>LG</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="avatar"]').should('have.class', 'w-20').should('have.class', 'h-20');
+  });
+
+  it('renders multiple avatars in a group', () => {
+    cy.mount(
+      <div className="flex -space-x-4">
+        <Avatar>
+          <AvatarImage src="https://github.com/user1.png" />
+          <AvatarFallback>U1</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/user2.png" />
+          <AvatarFallback>U2</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/user3.png" />
+          <AvatarFallback>U3</AvatarFallback>
+        </Avatar>
+      </div>
+    );
+
+    cy.get('[data-testid="avatar"]').should('have.length', 3);
+  });
+
+  it('supports different sizes via className', () => {
+    cy.mount(
+      <div className="flex gap-4">
+        <Avatar className="h-8 w-8">
+          <AvatarFallback>SM</AvatarFallback>
+        </Avatar>
+        <Avatar className="h-12 w-12">
+          <AvatarFallback>MD</AvatarFallback>
+        </Avatar>
+        <Avatar className="h-16 w-16">
+          <AvatarFallback>LG</AvatarFallback>
+        </Avatar>
+      </div>
+    );
+
+    cy.get('[data-testid="avatar"]').first().should('have.class', 'h-8');
+    cy.get('[data-testid="avatar"]').eq(1).should('have.class', 'h-12');
+    cy.get('[data-testid="avatar"]').last().should('have.class', 'h-16');
+  });
+
+  it('displays initials correctly in fallback', () => {
+    cy.mount(
+      <Avatar>
+        <AvatarFallback>John Doe</AvatarFallback>
+      </Avatar>
+    );
+
+    // Note: The component should ideally show "JD" but shows full text
+    cy.get('[data-testid="avatar-fallback"]').should('contain', 'John Doe');
+  });
+
+  it('supports custom fallback styles', () => {
+    cy.mount(
+      <Avatar>
+        <AvatarFallback className="bg-blue-500 text-white">AB</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="avatar-fallback"]')
+      .should('have.class', 'bg-blue-500')
+      .should('have.class', 'text-white');
+  });
+
+  it('maintains aspect ratio', () => {
+    cy.mount(
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="avatar-image"]').should('have.class', 'aspect-square');
+  });
+
+  it('handles click events', () => {
+    const onClick = cy.stub();
+
+    cy.mount(
+      <Avatar onClick={onClick} className="cursor-pointer">
+        <AvatarFallback>CL</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="avatar"]').click();
+    cy.wrap(onClick).should('have.been.calledOnce');
+  });
+
+  it('works with status indicators', () => {
+    cy.mount(
+      <div className="relative inline-flex">
+        <Avatar>
+          <AvatarFallback>ON</AvatarFallback>
+        </Avatar>
+        <span
+          className="absolute -bottom-1 -right-1 h-3.5 w-3.5 rounded-full bg-green-500 ring-2 ring-white"
+          data-testid="status-indicator"
+        />
+      </div>
+    );
+
+    cy.get('[data-testid="avatar"]').should('exist');
+    cy.get('[data-testid="status-indicator"]')
+      .should('exist')
+      .should('have.class', 'bg-green-500')
+      .should('have.class', 'ring-2');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(
+      <Avatar data-testid="custom-avatar" data-user-id="123">
+        <AvatarFallback>DA</AvatarFallback>
+      </Avatar>
+    );
+
+    cy.get('[data-testid="custom-avatar"]')
+      .should('exist')
+      .should('have.attr', 'data-user-id', '123');
+  });
+});