code: tsx,nextjs,frontends (2 files)

frontends/nextjs/src/components/CssClassBuilder.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useCallback } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui'
 import { Button } from '@/components/ui'
 import { Input } from '@/components/ui'
@@ -62,6 +62,12 @@ export function CssClassBuilder({ open, onClose, initialValue = '', onSave }: Cs
     invalidCustomTokens.length === 0 &&
     uniqueCustomTokens.some((token) => !selectedClassSet.has(token))
 
+  const loadCssClasses = useCallback(async () => {
+    const classes = await Database.getCssClasses()
+    const sorted = classes.slice().sort((a, b) => a.name.localeCompare(b.name))
+    setCategories(sorted)
+  }, [])
+
   useEffect(() => {
     if (open) {
       loadCssClasses()
@@ -69,7 +75,7 @@ export function CssClassBuilder({ open, onClose, initialValue = '', onSave }: Cs
       setSearchQuery('')
       setCustomClass('')
     }
-  }, [open, initialValue])
+  }, [open, initialValue, loadCssClasses])
 
   useEffect(() => {
     if (!open) {

frontends/nextjs/src/components/nerd-mode-ide/NerdModeTestsPanel.tsx

@@ -0,0 +1,51 @@
+import ScienceIcon from '@mui/icons-material/Science'
+import { Badge } from '@/components/ui'
+import { Button } from '@/components/ui'
+import { Card, CardContent } from '@/components/ui'
+import { ScrollArea } from '@/components/ui'
+import type { TestResult } from './types'
+
+interface NerdModeTestsPanelProps {
+  testResults: TestResult[]
+  onRunTests: () => void
+}
+
+export function NerdModeTestsPanel({ testResults, onRunTests }: NerdModeTestsPanelProps) {
+  return (
+    <div className="h-[calc(100%-40px)] m-0 p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold">Test Suite</h3>
+        <Button size="sm" onClick={onRunTests}>
+          <ScienceIcon className="mr-2" fontSize="small" />
+          Run Tests
+        </Button>
+      </div>
+      <ScrollArea className="h-[calc(100%-60px)]">
+        <div className="space-y-2">
+          {testResults.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <ScienceIcon fontSize="large" className="mx-auto mb-2 opacity-50" />
+              <p>No tests run yet</p>
+            </div>
+          ) : (
+            testResults.map((test, i) => (
+              <Card key={i}>
+                <CardContent className="p-3 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Badge variant={test.status === 'passed' ? 'default' : 'destructive'}>
+                      {test.status}
+                    </Badge>
+                    <span className="text-sm">{test.name}</span>
+                  </div>
+                  {test.duration && (
+                    <span className="text-xs text-muted-foreground">{test.duration}ms</span>
+                  )}
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}