code: tsx,nextjs,frontends (3 files)

frontends/nextjs/src/components/ComponentHierarchyEditor.tsx

@@ -157,11 +157,25 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
   const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null)
   const [configNodeId, setConfigNodeId] = useState<string | null>(null)
+  const componentIdPrefix = useId()
+
+  const loadPages = useCallback(async () => {
+    const loadedPages = await Database.getPages()
+    setPages(loadedPages)
+    if (loadedPages.length > 0 && !selectedPageId) {
+      setSelectedPageId(loadedPages[0].id)
+    }
+  }, [selectedPageId])
+
+  const loadHierarchy = useCallback(async () => {
+    const allHierarchy = await Database.getComponentHierarchy()
+    setHierarchy(allHierarchy)
+  }, [])
 
   useEffect(() => {
     loadPages()
     loadHierarchy()
-  }, [])
+  }, [loadPages, loadHierarchy])
 
   useEffect(() => {
     if (selectedPageId) {

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

@@ -0,0 +1,46 @@
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+import SaveIcon from '@mui/icons-material/Save'
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'
+import { Badge } from '@/components/ui'
+import { Button } from '@/components/ui'
+import type { FileNode } from '@/lib/nerd-mode-ide'
+
+interface NerdModeEditorHeaderProps {
+  selectedFile: FileNode
+  isRunning: boolean
+  onRunCode: () => void
+  onSave: () => void
+  onDelete: () => void
+}
+
+export function NerdModeEditorHeader({
+  selectedFile,
+  isRunning,
+  onRunCode,
+  onSave,
+  onDelete,
+}: NerdModeEditorHeaderProps) {
+  return (
+    <div className="flex items-center justify-between p-2 bg-muted border-b border-border">
+      <div className="flex items-center gap-2">
+        <DescriptionOutlinedIcon fontSize="small" />
+        <span className="text-sm font-medium">{selectedFile.name}</span>
+        <Badge variant="outline" className="text-xs">
+          {selectedFile.language || 'text'}
+        </Badge>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button size="sm" variant="ghost" onClick={onRunCode} disabled={isRunning}>
+          <PlayArrowIcon fontSize="small" />
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onSave}>
+          <SaveIcon fontSize="small" />
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onDelete}>
+          <DeleteOutlineIcon fontSize="small" />
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,49 @@
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import LibraryAddIcon from '@mui/icons-material/LibraryAdd'
+import SettingsIcon from '@mui/icons-material/Settings'
+import TerminalIcon from '@mui/icons-material/Terminal'
+import { Button } from '@/components/ui'
+import { CardHeader, CardTitle } from '@/components/ui'
+
+interface NerdModeIDEHeaderProps {
+  workspaceName: string
+  onOpenGitConfig: () => void
+  onOpenNewItem: () => void
+  onOpenTemplates: () => void
+  onExportZip: () => void
+}
+
+export function NerdModeIDEHeader({
+  workspaceName,
+  onOpenGitConfig,
+  onOpenNewItem,
+  onOpenTemplates,
+  onExportZip,
+}: NerdModeIDEHeaderProps) {
+  return (
+    <CardHeader className="pb-3">
+      <div className="flex items-center justify-between">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <TerminalIcon fontSize="small" />
+          Nerd Mode IDE
+          <span className="text-sm text-muted-foreground">· {workspaceName}</span>
+        </CardTitle>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="outline" onClick={onOpenGitConfig}>
+            <SettingsIcon fontSize="small" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={onOpenTemplates}>
+            <AutoAwesomeIcon fontSize="small" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={onOpenNewItem}>
+            <LibraryAddIcon fontSize="small" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={onExportZip}>
+            <CloudDownloadIcon fontSize="small" />
+          </Button>
+        </div>
+      </div>
+    </CardHeader>
+  )
+}