diff --git a/.gitignore b/.gitignore index f80867aaf5..d218905310 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,10 @@ test-results/ ci-e2e-traces/ playwright-report/ .vercel + +# Visual regression snapshots +test/e2e/**/*-snapshots/ +test/e2e/**/*.png + +# LLMs +CLAUDE.md diff --git a/app/components/AccordionItem.tsx b/app/components/AccordionItem.tsx index c23a078b4d..e458884e65 100644 --- a/app/components/AccordionItem.tsx +++ b/app/components/AccordionItem.tsx @@ -29,9 +29,9 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP return ( - +
{label}
- + -
+
{fip.description}
diff --git a/app/components/CapacityBar.tsx b/app/components/CapacityBar.tsx index 39fc075cd7..d07497cfb4 100644 --- a/app/components/CapacityBar.tsx +++ b/app/components/CapacityBar.tsx @@ -34,15 +34,15 @@ export const CapacityBar = ({ const unitElt = includeUnit ? <> {unit} : null return ( -
+
-
+
-
+
@@ -55,9 +55,9 @@ function TitleCell({ icon, title, unit }: TitleCellProps) { return (
- {icon} - {title} - ({unit}) + {icon} + {title} + ({unit})
) @@ -67,8 +67,8 @@ function PctCell({ pct }: { pct: number }) { // NaN happens when both top and bottom are 0 if (Number.isNaN(pct)) { return ( -
-
—
+
+
—
%
) @@ -77,7 +77,7 @@ function PctCell({ pct }: { pct: number }) { const [wholeNumber, decimal] = splitDecimal(pct) return (
-
{wholeNumber}
+
{wholeNumber}
{decimal}%
) @@ -87,10 +87,10 @@ function Bar({ pct }: { pct: number }) { return (
-
+
) } @@ -103,9 +103,9 @@ type ValueCellProps = { function ValueCell({ label, value, unit }: ValueCellProps) { return ( -
-
{label}
-
+
+
{label}
+
{unit}
diff --git a/app/components/CapacityBars.tsx b/app/components/CapacityBars.tsx index f5d415cf1c..b78da863ec 100644 --- a/app/components/CapacityBars.tsx +++ b/app/components/CapacityBars.tsx @@ -23,7 +23,7 @@ export const CapacityBars = ({ allocatedLabel: string }) => { return ( -
+
} title="CPU" diff --git a/app/components/CopyCode.tsx b/app/components/CopyCode.tsx index 15187abe37..9441388ec4 100644 --- a/app/components/CopyCode.tsx +++ b/app/components/CopyCode.tsx @@ -46,7 +46,7 @@ export function CopyCodeModal({ return ( - 
+        
           {children}
         

       
@@ -71,7 +71,7 @@ export function CopyCodeModal({
                 animate={{ opacity: 1, y: '-50%', x: '-50%' }}
                 initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }}
                 transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
-                className="absolute left-1/2 top-1/2 flex items-center"
+                className="absolute top-1/2 left-1/2 flex items-center"
               >
                 
               
@@ -108,7 +108,7 @@ export function EquivalentCliCommand({ project, instance }: EquivProps) {
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
       >
-        $
+        $
         {cmdParts.join(' \\\n    ')}
       
     
diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index 88b6793b82..0e8fa08f6b 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -22,14 +22,14 @@ type DocsPopoverLinkProps = {
 export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
   
-    

-      

-        {linkText}
-        
+    

+      

+        {linkText}
+        
       

     

   
@@ -47,25 +47,25 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   const title = `Learn about ${heading}`
   return (
     
-      
+      
         

           
         

       
       
         

-          

-            
{icon}

+          

+            
{icon}

             {title}
           

-          
{summary}

+          
{summary}

         

-        

-          
Guides

+        

+          
Guides

           {links.map((link) => (
             
           ))}
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
index be419ffa09..00cb74b893 100644
--- a/app/components/ErrorBoundary.tsx
+++ b/app/components/ErrorBoundary.tsx
@@ -19,7 +19,7 @@ import { ErrorPage, NotFound } from './ErrorPage'
 const IdpMisconfig = () => (
   
diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx
index 3e6b6522c1..ab831301f6 100644
--- a/app/components/ErrorPage.tsx
+++ b/app/components/ErrorPage.tsx
@@ -17,7 +17,7 @@ import { Button } from '~/ui/lib/Button'
 const GradientBackground = () => (
   

         
-          
+          
           Back to console
         
-        
+        
       

-      

+      

         

-          

-          
+          

+          
         

 
         
{children}

diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx
index 5baebea038..1a9518e3c1 100644
--- a/app/components/ExternalIps.tsx
+++ b/app/components/ExternalIps.tsx
@@ -44,14 +44,14 @@ export function ExternalIps({ project, instance }: PP.Instance) {
 
   return (
     

-      {intersperse(links, )}
+      {intersperse(links, )}
       {/* if there are more than 2 ips, add a link to the instance networking page */}
       {overflowCount > 0 && (
         <>
-          
+          
           
             …
           
diff --git a/app/components/InstanceAutoRestartPopover.tsx b/app/components/InstanceAutoRestartPopover.tsx
index 54599937ba..da21db16b9 100644
--- a/app/components/InstanceAutoRestartPopover.tsx
+++ b/app/components/InstanceAutoRestartPopover.tsx
@@ -16,11 +16,11 @@ import {
   NextArrow12Icon,
   OpenLink12Icon,
 } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
 
 import type { Instance } from '~/api'
 import { instanceAutoRestartingSoon } from '~/api/util'
 import { useInstanceSelector } from '~/hooks/use-params'
-import { Badge } from '~/ui/lib/Badge'
 import { Spinner } from '~/ui/lib/Spinner'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
@@ -43,14 +43,14 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
   return (
     
       
         
       
       
         
@@ -92,7 +92,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
             )}
           
         )}
-        

+        

           

             {enabled
               ? restartingSoon
@@ -106,13 +106,13 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
             target="_blank"
             rel="noreferrer"
           >
-            
+            
               Learn about{' '}
               
                 Instance Auto-Restart
               
             
-            
+            
           
         

       
@@ -121,10 +121,8 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
 }
 
 const PopoverRow = ({ label, children }: { label: string; children: ReactNode }) => (
-  

-    
{label}

-    

-      {children}
-    

+  

+    
{label}

+    
{children}

   

 )
diff --git a/app/components/ListPlusCell.tsx b/app/components/ListPlusCell.tsx
index 92628d95d2..e6fd1f8016 100644
--- a/app/components/ListPlusCell.tsx
+++ b/app/components/ListPlusCell.tsx
@@ -37,7 +37,7 @@ export const ListPlusCell = ({
   const rest = array.slice(numInCell)
   const content = (
     

-      
{tooltipTitle}

+      
{tooltipTitle}

       
{...rest}

     

   )
diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index 3c78ef84e6..a2e72179b1 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -27,10 +27,10 @@ export const MoreActionsMenu = ({
 }: MoreActionsMenuProps) => {
   return (
     
-      
+      
         

diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx
index 4e6996aeca..96685833fb 100644
--- a/app/components/MswBanner.tsx
+++ b/app/components/MswBanner.tsx
@@ -49,11 +49,11 @@ export function MswBanner({ disableButton }: Props) {
   return (
     <>
       {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */}
-