@fragments-sdk/cli 0.9.0 → 0.10.0

package/src/viewer/components/AccessibilityPanel.tsx

@@ -11,7 +11,9 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { Result, NodeResult, ImpactValue, RunOptions } from "axe-core";
-import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState } from "@fragments-sdk/ui";
+import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState, Input } from "@fragments-sdk/ui";
+import { ShieldCheck, XCircle, Wheelchair } from "@phosphor-icons/react";
+import { PanelShell } from "./PanelShell.js";
 import { BRAND } from "../../core/index.js";
 import {
   updateComponentA11yResult,
@@ -577,163 +579,178 @@ export function AccessibilityPanel({
 
   // Check if currently re-scanning due to HMR
   const isReScanning = isScanning && results !== null;
+  const isInitialScan = isScanning && !results;
+
+  // Determine empty config for error / no-results states
+  const emptyConfig = (() => {
+    if (!isInitialScan && error) {
+      return {
+        icon: <XCircle size={24} weight="regular" style={{ color: 'var(--color-danger)' }} />,
+        title: "Scan failed",
+        description: error,
+        action: <Button variant="secondary" size="sm" onClick={runScan}>Retry Scan</Button>,
+      };
+    }
+    if (!isInitialScan && !error && !results) {
+      return {
+        icon: <Wheelchair size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
+        title: "No scan results",
+        description: "Run an accessibility scan to check this component for WCAG violations.",
+        action: <Button size="sm" onClick={runScan}>Run Scan</Button>,
+      };
+    }
+    return undefined;
+  })();
 
-  // Render loading state
-  if (isScanning && !results) {
-    return (
-      <Stack align="center" justify="center" style={{ padding: 32 }}>
-        <LoadingIcon style={{ width: 24, height: 24, animation: 'spin 1s linear infinite', marginBottom: 8 }} />
+  // Custom loading skeleton for accessibility scan
+  const loadingSkeleton = (
+    <Stack gap="md">
+      <Box paddingX="md" paddingY="xs" background="secondary" rounded="md">
+        <Stack direction="row" align="center" gap="md">
+          {[0, 1, 2].map((i) => (
+            <div key={i} style={{ width: '90px', height: '28px', borderRadius: '6px', background: 'var(--bg-hover)', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', animationDelay: `${i * 100}ms` }} />
+          ))}
+        </Stack>
+      </Box>
+      {[0, 1, 2].map((i) => (
+        <Card key={i}>
+          <Box padding="sm">
+            <Stack direction="row" align="center" gap="sm">
+              <div style={{ width: '16px', height: '16px', borderRadius: '4px', background: 'var(--bg-hover)', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', animationDelay: `${i * 150}ms` }} />
+              <div style={{ width: '50px', height: '18px', borderRadius: '9px', background: 'var(--bg-hover)', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', animationDelay: `${i * 150 + 50}ms` }} />
+              <div style={{ flex: 1, height: '14px', borderRadius: '4px', background: 'var(--bg-hover)', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', animationDelay: `${i * 150 + 100}ms` }} />
+              <div style={{ width: '60px', height: '18px', borderRadius: '9px', background: 'var(--bg-hover)', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', animationDelay: `${i * 150 + 150}ms` }} />
+            </Stack>
+          </Box>
+        </Card>
+      ))}
+      <Stack direction="row" align="center" justify="center" gap="xs">
+        <LoadingIcon style={{ width: 14, height: 14, animation: 'spin 1s linear infinite' }} />
         <Text size="xs" color="tertiary">Running accessibility checks...</Text>
       </Stack>
-    );
-  }
-
-  // Render error state
-  if (error) {
-    return (
-      <Stack align="center" justify="center" style={{ padding: 32 }}>
-        <XIcon style={{ width: 24, height: 24, color: 'var(--color-danger)', marginBottom: 8 }} />
-        <Text size="xs" color="secondary" style={{ color: 'var(--color-danger)', marginBottom: 8 }}>{error}</Text>
-        <Button variant="ghost" size="sm" onClick={runScan}>Retry Scan</Button>
-      </Stack>
-    );
-  }
-
-  // Render no results state
-  if (!results) {
-    return (
-      <Stack align="center" justify="center" style={{ padding: 32 }}>
-        <AccessibilityIcon style={{ width: 32, height: 32, marginBottom: 8, opacity: 0.5, color: 'var(--text-tertiary)' }} />
-        <Text size="xs" color="tertiary" style={{ marginBottom: 8 }}>No accessibility scan results</Text>
-        <Button size="sm" onClick={runScan}>Run Scan</Button>
-      </Stack>
-    );
-  }
+    </Stack>
+  );
 
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
-      {/* Tabs header with actions */}
-      <Stack direction="row" align="center" gap="xs" style={{
-        padding: '8px 16px',
-        borderBottom: '1px solid var(--border)',
-        background: 'var(--bg-secondary)',
-        flexShrink: 0,
-      }}>
-        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabType)}>
-          <Tabs.List>
-            <Tabs.Tab value="violations">
-              <span style={{ color: 'var(--color-danger)' }}>{counts.violations}</span> Violations
-            </Tabs.Tab>
-            <Tabs.Tab value="passes">
-              <span style={{ color: 'var(--color-success)' }}>{counts.passes}</span> Passes
-            </Tabs.Tab>
-            <Tabs.Tab value="incomplete">
-              <span style={{ color: 'var(--color-warning)' }}>{counts.incomplete}</span> Incomplete
-            </Tabs.Tab>
-          </Tabs.List>
-        </Tabs>
-
-        <div style={{ flex: 1 }} />
-
-        {/* Re-scanning indicator */}
-        {isReScanning && (
-          <Badge variant="warning" size="sm">
-            <Stack direction="row" align="center" gap="xs">
-              <LoadingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
-              Re-scanning...
-            </Stack>
-          </Badge>
-        )}
-
-        {/* Rescan button */}
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={runScan}
-          disabled={isScanning}
-          title="Re-run accessibility scan"
-        >
-          <LoadingIcon
-            style={{
-              width: 12,
-              height: 12,
-              ...(isScanning ? { animation: 'spin 1s linear infinite' } : {}),
-            }}
-          />
-          {isScanning ? "Scanning..." : "Rescan"}
-        </Button>
-
-        {/* AI Setup button */}
-        <Button
-          variant={aiConfig ? "secondary" : "ghost"}
-          size="sm"
-          onClick={() => setShowAISetup(true)}
-          title={aiConfig ? "AI fixes enabled" : "Configure AI for fix suggestions"}
-        >
-          <WandIcon style={{ width: 12, height: 12 }} />
-          {aiConfig ? "AI Ready" : "Setup AI"}
-        </Button>
-      </Stack>
+  // Toolbar with tabs, rescan badge, and action buttons (only when results exist)
+  const toolbar = results && !error ? (
+    <Stack direction="row" align="center" gap="xs" style={{ width: '100%' }}>
+      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabType)}>
+        <Tabs.List>
+          <Tabs.Tab value="violations">
+            <span style={{ color: 'var(--color-danger)' }}>{counts.violations}</span> Violations
+          </Tabs.Tab>
+          <Tabs.Tab value="passes">
+            <span style={{ color: 'var(--color-success)' }}>{counts.passes}</span> Passes
+          </Tabs.Tab>
+          <Tabs.Tab value="incomplete">
+            <span style={{ color: 'var(--color-warning)' }}>{counts.incomplete}</span> Incomplete
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+
+      <Box style={{ flex: 1 }} />
+
+      {isReScanning && (
+        <Badge variant="warning" size="sm">
+          <Stack direction="row" align="center" gap="xs">
+            <LoadingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
+            Re-scanning...
+          </Stack>
+        </Badge>
+      )}
+
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={runScan}
+        disabled={isScanning}
+        title="Re-run accessibility scan"
+      >
+        <LoadingIcon
+          style={{
+            width: 12,
+            height: 12,
+            ...(isScanning ? { animation: 'spin 1s linear infinite' } : {}),
+          }}
+        />
+        {isScanning ? "Scanning..." : "Rescan"}
+      </Button>
+
+      <Button
+        variant={aiConfig ? "secondary" : "ghost"}
+        size="sm"
+        onClick={() => setShowAISetup(true)}
+        title={aiConfig ? "AI fixes enabled" : "Configure AI for fix suggestions"}
+      >
+        <WandIcon style={{ width: 12, height: 12 }} />
+        {aiConfig ? "AI Ready" : "Setup AI"}
+      </Button>
+    </Stack>
+  ) : undefined;
 
-      {/* Content */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
-        {activeTab === "violations" && (
-          <>
-            {counts.violations === 0 ? (
-              <SuccessMessage message="No accessibility violations found." />
-            ) : (
-              <EnhancedRuleList
-                rules={sortedViolations}
-                expandedRules={expandedRules}
-                onToggleRule={toggleRule}
-                onHighlight={highlightElement}
-                highlightedElement={highlightedElement}
-                onGenerateFix={generateAIFix}
-                generatingFix={generatingFix}
-                aiFixes={aiFixes}
-                aiEnabled={!!aiConfig}
-                onCopyFix={copyFix}
-                copiedFix={copiedFix}
-                type="violation"
-              />
-            )}
-          </>
-        )}
-
-        {activeTab === "passes" && (
-          <>
-            {counts.passes === 0 ? (
-              <EmptyMessage message="No passing checks to display." />
-            ) : (
-              <RuleList
-                rules={results.passes}
-                expandedRules={expandedRules}
-                onToggleRule={toggleRule}
-                onHighlight={highlightElement}
-                highlightedElement={highlightedElement}
-                type="pass"
-              />
-            )}
-          </>
-        )}
-
-        {activeTab === "incomplete" && (
-          <>
-            {counts.incomplete === 0 ? (
-              <EmptyMessage message="No incomplete checks requiring manual review." />
-            ) : (
-              <RuleList
-                rules={results.incomplete}
-                expandedRules={expandedRules}
-                onToggleRule={toggleRule}
-                onHighlight={highlightElement}
-                highlightedElement={highlightedElement}
-                type="incomplete"
-              />
-            )}
-          </>
-        )}
-      </div>
+  return (
+    <PanelShell
+      loading={isInitialScan}
+      loadingContent={loadingSkeleton}
+      toolbar={toolbar}
+      empty={emptyConfig}
+    >
+      {activeTab === "violations" && (
+        <>
+          {counts.violations === 0 ? (
+            <SuccessMessage message="No accessibility violations found." />
+          ) : (
+            <EnhancedRuleList
+              rules={sortedViolations}
+              expandedRules={expandedRules}
+              onToggleRule={toggleRule}
+              onHighlight={highlightElement}
+              highlightedElement={highlightedElement}
+              onGenerateFix={generateAIFix}
+              generatingFix={generatingFix}
+              aiFixes={aiFixes}
+              aiEnabled={!!aiConfig}
+              onCopyFix={copyFix}
+              copiedFix={copiedFix}
+              type="violation"
+            />
+          )}
+        </>
+      )}
+
+      {activeTab === "passes" && (
+        <>
+          {counts.passes === 0 ? (
+            <EmptyMessage message="No passing checks to display." />
+          ) : (
+            <RuleList
+              rules={results.passes}
+              expandedRules={expandedRules}
+              onToggleRule={toggleRule}
+              onHighlight={highlightElement}
+              highlightedElement={highlightedElement}
+              type="pass"
+            />
+          )}
+        </>
+      )}
+
+      {activeTab === "incomplete" && (
+        <>
+          {counts.incomplete === 0 ? (
+            <EmptyMessage message="No incomplete checks requiring manual review." />
+          ) : (
+            <RuleList
+              rules={results.incomplete}
+              expandedRules={expandedRules}
+              onToggleRule={toggleRule}
+              onHighlight={highlightElement}
+              highlightedElement={highlightedElement}
+              type="incomplete"
+            />
+          )}
+        </>
+      )}
 
       {/* AI Setup Dialog */}
       <Dialog open={showAISetup} onOpenChange={(open) => !open && setShowAISetup(false)}>
@@ -745,7 +762,7 @@ export function AccessibilityPanel({
           />
         </Dialog.Content>
       </Dialog>
-    </div>
+    </PanelShell>
   );
 }
 
@@ -790,56 +807,49 @@ function EnhancedRuleList({
         return (
           <Card key={rule.id} style={{ borderLeft: `4px solid ${impactColors.borderLeft}` }}>
             {/* Rule Header */}
-            <button
+            <Button
+              variant="ghost"
+              fullWidth
               onClick={() => onToggleRule(rule.id)}
-              style={{
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                padding: '10px 12px',
-                textAlign: 'left',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                transition: 'background var(--transition-fast)',
-              }}
+              style={{ justifyContent: 'flex-start', padding: '10px 12px' }}
             >
-              {isExpanded ? (
-                <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
-              ) : (
-                <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
-              )}
-
-              {/* Impact badge */}
-              {rule.impact && (
-                <Badge variant={impactColors.variant} size="sm">
-                  {rule.impact}
-                </Badge>
-              )}
-
-              {/* Rule ID */}
-              <Text font="mono" size="xs" color="tertiary">{rule.id}</Text>
-
-              {/* Rule description */}
-              <Text size="xs" style={{
-                flex: 1,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}>
-                {rule.description}
-              </Text>
+              <Stack direction="row" align="center" gap="sm" style={{ width: '100%' }}>
+                {isExpanded ? (
+                  <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
+                ) : (
+                  <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
+                )}
 
-              {/* Element count */}
-              <Badge size="sm">
-                {rule.nodes.length} element{rule.nodes.length !== 1 ? "s" : ""}
-              </Badge>
-            </button>
+                {/* Impact badge */}
+                {rule.impact && (
+                  <Badge variant={impactColors.variant} size="sm">
+                    {rule.impact}
+                  </Badge>
+                )}
+
+                {/* Rule ID */}
+                <Text font="mono" size="xs" color="tertiary">{rule.id}</Text>
+
+                {/* Rule description */}
+                <Text size="xs" style={{
+                  flex: 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}>
+                  {rule.description}
+                </Text>
+
+                {/* Element count */}
+                <Badge size="sm">
+                  {rule.nodes.length} element{rule.nodes.length !== 1 ? "s" : ""}
+                </Badge>
+              </Stack>
+            </Button>
 
             {/* Expanded content */}
             {isExpanded && (
-              <div style={{ borderTop: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
+              <Box borderTop background="secondary">
                 {/* Why it matters + WCAG reference */}
                 {staticFix && (
                   <Box padding="sm" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
@@ -863,40 +873,31 @@ function EnhancedRuleList({
                             WCAG {staticFix.wcagCriterion.id} Level {staticFix.wcagCriterion.level}
                           </Badge>
                           <Text size="xs" color="secondary">{staticFix.wcagCriterion.name}</Text>
-                          <a
+                          <Button
+                            as="a"
+                            variant="ghost"
+                            size="sm"
                             href={staticFix.wcagCriterion.url}
                             target="_blank"
                             rel="noopener noreferrer"
-                            style={{
-                              fontSize: 12,
-                              color: 'var(--color-accent)',
-                              marginLeft: 'auto',
-                              textDecoration: 'none',
-                            }}
+                            style={{ marginLeft: 'auto', fontSize: 12 }}
                           >
                             Learn more
-                          </a>
+                          </Button>
                         </Stack>
                       )}
 
                       {/* Before/After examples */}
                       {(staticFix.badExample || staticFix.goodExample) && (
-                        <div style={{
-                          display: 'grid',
-                          gridTemplateColumns: '1fr 1fr',
-                          gap: 8,
-                          marginTop: 8,
-                        }}>
+                        <Box display="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 8 }}>
                           {staticFix.badExample && (
                             <div>
                               <Text size="xs" weight="medium" style={{ color: 'var(--color-danger)', marginBottom: 4 }}>
                                 Before
                               </Text>
-                              <pre style={{
+                              <Box as="pre" padding="xs" rounded="sm" style={{
                                 fontSize: 10,
                                 fontFamily: 'monospace',
-                                padding: 8,
-                                borderRadius: 'var(--radius-sm)',
                                 background: 'var(--color-danger-bg)',
                                 color: 'var(--color-danger)',
                                 overflowX: 'auto',
@@ -904,7 +905,7 @@ function EnhancedRuleList({
                                 margin: 0,
                               }}>
                                 {staticFix.badExample}
-                              </pre>
+                              </Box>
                             </div>
                           )}
                           {staticFix.goodExample && (
@@ -912,11 +913,9 @@ function EnhancedRuleList({
                               <Text size="xs" weight="medium" style={{ color: 'var(--color-success)', marginBottom: 4 }}>
                                 After
                               </Text>
-                              <pre style={{
+                              <Box as="pre" padding="xs" rounded="sm" style={{
                                 fontSize: 10,
                                 fontFamily: 'monospace',
-                                padding: 8,
-                                borderRadius: 'var(--radius-sm)',
                                 background: 'var(--color-success-bg)',
                                 color: 'var(--color-success)',
                                 overflowX: 'auto',
@@ -924,10 +923,10 @@ function EnhancedRuleList({
                                 margin: 0,
                               }}>
                                 {staticFix.goodExample}
-                              </pre>
+                              </Box>
                             </div>
                           )}
-                        </div>
+                        </Box>
                       )}
                     </Stack>
                   </Box>
@@ -938,14 +937,17 @@ function EnhancedRuleList({
                   <Box padding="sm" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                     <Text size="xs" color="secondary" style={{ marginBottom: 4 }}>{rule.help}</Text>
                     {rule.helpUrl && (
-                      <a
+                      <Button
+                        as="a"
+                        variant="ghost"
+                        size="sm"
                         href={rule.helpUrl}
                         target="_blank"
                         rel="noopener noreferrer"
-                        style={{ fontSize: 12, color: 'var(--color-accent)', textDecoration: 'none' }}
+                        style={{ fontSize: 12 }}
                       >
                         Learn more about {rule.id}
-                      </a>
+                      </Button>
                     )}
                   </Box>
                 )}
@@ -1011,20 +1013,18 @@ function EnhancedRuleList({
                         </Stack>
 
                         {/* HTML snippet */}
-                        <pre style={{
+                        <Box as="pre" padding="xs" rounded="sm" style={{
                           fontSize: 10,
                           fontFamily: 'monospace',
                           color: 'var(--text-tertiary)',
                           background: 'var(--bg-primary)',
-                          borderRadius: 'var(--radius-sm)',
-                          padding: 8,
                           overflowX: 'auto',
                           whiteSpace: 'pre-wrap',
                           border: '1px solid var(--border-subtle)',
                           margin: 0,
                         }}>
                           {node.html}
-                        </pre>
+                        </Box>
 
                         {/* Failure summary */}
                         {node.failureSummary && (
@@ -1054,19 +1054,17 @@ function EnhancedRuleList({
                                 <Text size="xs" style={{ color: 'var(--color-info)', marginBottom: 8 }}>
                                   {elementFix.explanation}
                                 </Text>
-                                <pre style={{
+                                <Box as="pre" padding="xs" rounded="sm" style={{
                                   fontSize: 10,
                                   fontFamily: 'monospace',
                                   color: 'var(--color-info)',
                                   background: 'var(--bg-secondary)',
-                                  borderRadius: 'var(--radius-sm)',
-                                  padding: 8,
                                   overflowX: 'auto',
                                   whiteSpace: 'pre-wrap',
                                   margin: 0,
                                 }}>
                                   {elementFix.fixedHtml}
-                                </pre>
+                                </Box>
                               </Alert.Content>
                             </Alert.Body>
                           </Alert>
@@ -1074,10 +1072,8 @@ function EnhancedRuleList({
 
                         {/* AI fix suggestion */}
                         {aiFixes?.[fixKey] && (
-                          <div style={{
+                          <Box padding="xs" rounded="sm" style={{
                             marginTop: 8,
-                            padding: 8,
-                            borderRadius: 'var(--radius-sm)',
                             background: 'var(--color-accent-subtle)',
                             border: '1px solid var(--color-accent)',
                           }}>
@@ -1087,7 +1083,7 @@ function EnhancedRuleList({
                                 AI Fix Suggestion
                               </Text>
                             </Stack>
-                            <pre style={{
+                            <Box as="pre" style={{
                               fontSize: 10,
                               fontFamily: 'monospace',
                               color: 'var(--color-accent)',
@@ -1095,8 +1091,8 @@ function EnhancedRuleList({
                               margin: 0,
                             }}>
                               {aiFixes[fixKey]}
-                            </pre>
-                          </div>
+                            </Box>
+                          </Box>
                         )}
                       </Box>
                     );
@@ -1118,7 +1114,7 @@ function EnhancedRuleList({
                     </Stack>
                   </Box>
                 )}
-              </div>
+              </Box>
             )}
           </Card>
         );
@@ -1152,63 +1148,59 @@ function RuleList({
         return (
           <Card key={rule.id}>
             {/* Rule Header */}
-            <button
+            <Button
+              variant="ghost"
+              fullWidth
               onClick={() => onToggleRule(rule.id)}
-              style={{
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                padding: '8px 12px',
-                textAlign: 'left',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                transition: 'background var(--transition-fast)',
-              }}
+              style={{ justifyContent: 'flex-start', padding: '8px 12px' }}
             >
-              {isExpanded ? (
-                <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
-              ) : (
-                <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
-              )}
-
-              {type === "pass" && (
-                <CheckIcon style={{ width: 16, height: 16, color: 'var(--color-success)', flexShrink: 0 }} />
-              )}
-
-              {type === "incomplete" && (
-                <Badge variant="warning" size="sm">Review</Badge>
-              )}
-
-              <Text size="xs" style={{
-                flex: 1,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}>
-                {rule.description}
-              </Text>
+              <Stack direction="row" align="center" gap="sm" style={{ width: '100%' }}>
+                {isExpanded ? (
+                  <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
+                ) : (
+                  <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
+                )}
 
-              <Text size="xs" color="tertiary" style={{ flexShrink: 0 }}>
-                {rule.nodes.length} element{rule.nodes.length !== 1 ? "s" : ""}
-              </Text>
-            </button>
+                {type === "pass" && (
+                  <CheckIcon style={{ width: 16, height: 16, color: 'var(--color-success)', flexShrink: 0 }} />
+                )}
+
+                {type === "incomplete" && (
+                  <Badge variant="warning" size="sm">Review</Badge>
+                )}
+
+                <Text size="xs" style={{
+                  flex: 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}>
+                  {rule.description}
+                </Text>
+
+                <Text size="xs" color="tertiary" style={{ flexShrink: 0 }}>
+                  {rule.nodes.length} element{rule.nodes.length !== 1 ? "s" : ""}
+                </Text>
+              </Stack>
+            </Button>
 
             {/* Expanded content */}
             {isExpanded && (
-              <div style={{ borderTop: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
+              <Box borderTop background="secondary">
                 <Box padding="sm" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                   <Text size="xs" color="secondary" style={{ marginBottom: 4 }}>{rule.help}</Text>
                   {rule.helpUrl && (
-                    <a
+                    <Button
+                      as="a"
+                      variant="ghost"
+                      size="sm"
                       href={rule.helpUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      style={{ fontSize: 12, color: 'var(--color-accent)', textDecoration: 'none' }}
+                      style={{ fontSize: 12 }}
                     >
                       Learn more about {rule.id}
-                    </a>
+                    </Button>
                   )}
                 </Box>
 
@@ -1248,24 +1240,22 @@ function RuleList({
                           {node.target[node.target.length - 1]}
                         </Button>
 
-                        <pre style={{
+                        <Box as="pre" padding="xs" rounded="sm" style={{
                           fontSize: 10,
                           fontFamily: 'monospace',
                           color: 'var(--text-tertiary)',
                           background: 'var(--bg-primary)',
-                          borderRadius: 'var(--radius-sm)',
-                          padding: 8,
                           overflowX: 'auto',
                           whiteSpace: 'pre-wrap',
                           margin: 0,
                         }}>
                           {node.html}
-                        </pre>
+                        </Box>
                       </Box>
                     );
                   })}
                 </div>
-              </div>
+              </Box>
             )}
           </Card>
         );
@@ -1278,17 +1268,15 @@ function SuccessMessage({ message }: { message: string }) {
   return (
     <EmptyState>
       <EmptyState.Icon>
-        <div style={{
+        <Box rounded="full" display="flex" style={{
           width: 48,
           height: 48,
-          borderRadius: '50%',
-          background: 'var(--color-success-bg)',
-          display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
+          background: 'var(--color-success-bg)',
         }}>
-          <CheckIcon style={{ width: 24, height: 24, color: 'var(--color-success)' }} />
-        </div>
+          <ShieldCheck size={24} weight="regular" style={{ color: 'var(--color-success)' }} />
+        </Box>
       </EmptyState.Icon>
       <EmptyState.Title style={{ color: 'var(--color-success)' }}>{message}</EmptyState.Title>
       <EmptyState.Description>
@@ -1302,7 +1290,15 @@ function EmptyMessage({ message }: { message: string }) {
   return (
     <EmptyState>
       <EmptyState.Icon>
-        <AccessibilityIcon style={{ width: 32, height: 32, opacity: 0.5 }} />
+        <Box rounded="full" display="flex" style={{
+          width: 48,
+          height: 48,
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'var(--bg-hover)',
+        }}>
+          <Wheelchair size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />
+        </Box>
       </EmptyState.Icon>
       <EmptyState.Description>{message}</EmptyState.Description>
     </EmptyState>
@@ -1368,7 +1364,7 @@ function AISetupModalContent({ onSave, onClose, currentConfig }: AISetupModalCon
 
             <div>
               <Text size="xs" weight="medium" style={{ marginBottom: 4 }}>API Key</Text>
-              <input
+              <Input
                 type="password"
                 value={apiKey}
                 onChange={(e) => setApiKey(e.target.value)}
@@ -1377,38 +1373,35 @@ function AISetupModalContent({ onSave, onClose, currentConfig }: AISetupModalCon
                     ? "sk-ant-api03-..."
                     : "sk-..."
                 }
-                style={{
-                  width: '100%',
-                  padding: '8px 12px',
-                  fontSize: 12,
-                  borderRadius: 'var(--radius-sm)',
-                  border: '1px solid var(--border)',
-                  background: 'var(--bg-secondary)',
-                  color: 'var(--text-primary)',
-                  outline: 'none',
-                  boxSizing: 'border-box',
-                }}
+                size="sm"
+                style={{ width: '100%' }}
               />
               <Text size="xs" color="tertiary" style={{ marginTop: 4 }}>
                 Get your API key from{" "}
                 {provider === "anthropic" ? (
-                  <a
+                  <Button
+                    as="a"
+                    variant="ghost"
+                    size="sm"
                     href="https://console.anthropic.com/settings/keys"
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ color: 'var(--color-accent)', textDecoration: 'none' }}
+                    style={{ display: 'inline', padding: 0, fontSize: 'inherit' }}
                   >
                     console.anthropic.com
-                  </a>
+                  </Button>
                 ) : (
-                  <a
+                  <Button
+                    as="a"
+                    variant="ghost"
+                    size="sm"
                     href="https://platform.openai.com/api-keys"
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ color: 'var(--color-accent)', textDecoration: 'none' }}
+                    style={{ display: 'inline', padding: 0, fontSize: 'inherit' }}
                   >
                     platform.openai.com
-                  </a>
+                  </Button>
                 )}
               </Text>
             </div>