initial

static/components/ModuleList.js

@@ -0,0 +1,79 @@
+// Module List Component
+export class ModuleList {
+  constructor(onModuleClick) {
+    this.container = document.getElementById('moduleList');
+    this.onModuleClick = onModuleClick;
+    this.init();
+  }
+
+  async init() {
+    await this.loadModuleList();
+  }
+
+  async loadModuleList() {
+    try {
+      const response = await fetch('/modules');
+      const data = await response.json();
+      
+      const list = document.createElement('div');
+      list.className = 'module-items';
+      
+      // Add builtins section
+      if (data.builtins && data.builtins.length > 0) {
+        const builtinsSection = this.createSection('Builtins', data.builtins.slice(0, 20));
+        list.appendChild(builtinsSection);
+      }
+      
+      // Add modules section
+      if (data.modules && data.modules.length > 0) {
+        const modulesSection = this.createSection('Standard Library', data.modules);
+        list.appendChild(modulesSection);
+      }
+      
+      if (this.container) {
+        this.container.innerHTML = '';
+        this.container.appendChild(list);
+      }
+    } catch (error) {
+      if (this.container) {
+        this.container.innerHTML = `<div class="error-message">Error loading modules: ${error.message}</div>`;
+      }
+    }
+  }
+
+  createSection(title, items) {
+    const section = document.createElement('div');
+    section.className = 'module-section';
+    
+    const sectionTitle = document.createElement('h4');
+    sectionTitle.textContent = title;
+    sectionTitle.className = 'module-section-title';
+    section.appendChild(sectionTitle);
+    
+    const itemsList = document.createElement('div');
+    itemsList.className = 'module-items-list';
+    
+    items.forEach(item => {
+      const fullName = item.full_name || (title === 'Builtins' ? `builtins.${item.name}` : item.name);
+      const btn = this.createModuleButton(fullName, item.name);
+      itemsList.appendChild(btn);
+    });
+    
+    section.appendChild(itemsList);
+    return section;
+  }
+
+  createModuleButton(fullName, displayName) {
+    const btn = document.createElement('button');
+    btn.className = 'module-item';
+    btn.textContent = displayName;
+    btn.title = fullName;
+    btn.addEventListener('click', () => {
+      if (this.onModuleClick) {
+        this.onModuleClick(fullName);
+      }
+    });
+    return btn;
+  }
+}
+