code: tsx,nextjs,frontends (2 files)

frontends/nextjs/src/components/ComponentHierarchyEditor.tsx

@@ -181,20 +181,7 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
     if (selectedPageId) {
       loadHierarchy()
     }
-  }, [selectedPageId])
-
-  const loadPages = async () => {
-    const loadedPages = await Database.getPages()
-    setPages(loadedPages)
-    if (loadedPages.length > 0 && !selectedPageId) {
-      setSelectedPageId(loadedPages[0].id)
-    }
-  }
-
-  const loadHierarchy = async () => {
-    const allHierarchy = await Database.getComponentHierarchy()
-    setHierarchy(allHierarchy)
-  }
+  }, [selectedPageId, loadHierarchy])
 
   const getRootNodes = () => {
     return Object.values(hierarchy)
@@ -212,7 +199,7 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
     if (!componentDef) return
 
     const newNode: ComponentNode = {
-      id: `node_${Date.now()}`,
+      id: `node_${componentIdPrefix}_${Object.keys(hierarchy).length}`,
       type: componentType,
       parentId: parentId,
       childIds: [],

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

@@ -0,0 +1,33 @@
+import { Button } from '@/components/ui'
+import { ScrollArea } from '@/components/ui'
+
+interface NerdModeConsolePanelProps {
+  consoleOutput: string[]
+  onClear: () => void
+}
+
+export function NerdModeConsolePanel({ consoleOutput, onClear }: NerdModeConsolePanelProps) {
+  return (
+    <div className="h-[calc(100%-40px)] m-0 p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold">Console Output</h3>
+        <Button size="sm" variant="outline" onClick={onClear}>
+          Clear
+        </Button>
+      </div>
+      <ScrollArea className="h-[calc(100%-60px)]">
+        <div className="font-mono text-xs bg-black/50 rounded p-3 space-y-1">
+          {consoleOutput.length === 0 ? (
+            <div className="text-muted-foreground">No output yet</div>
+          ) : (
+            consoleOutput.map((line, i) => (
+              <div key={i} className="text-white">
+                {line}
+              </div>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}