Add web front-end and fix API issues

web/src/index.ts

@@ -0,0 +1,75 @@
+import express from 'express';
+
+const app = express();
+const PORT = process.env.WEB_PORT || 3001;
+const API_URL = process.env.API_URL || 'http://localhost:8300';
+
+app.get('/', async (req, res) => {
+    try {
+        // 1. Fetch the hierarchy structure from your API workspace
+        const apiResponse = await fetch(`${API_URL}/api/categories/tree`);
+
+        if (!apiResponse.ok) {
+            throw new Error(`API responded with status: ${apiResponse.status}`);
+        }
+
+        const apiData = await apiResponse.json();
+        const categoriesTree = apiData.success ? apiData.data : [];
+
+        // 2. Recursive layout engine to convert nested JSON arrays to clean HTML lists
+        function renderTreeHTML(nodes: any[]): string {
+            if (!nodes || nodes.length === 0) return '';
+            let html = '<ul>';
+            for (const node of nodes) {
+                html += `
+          <li>
+            <span class="folder-name">${node.name}</span> 
+            <span class="path-tag">${node.path}</span>
+            ${renderTreeHTML(node.children)}
+          </li>
+        `;
+            }
+            html += '</ul>';
+            return html;
+        }
+
+        const treeHTML = renderTreeHTML(categoriesTree);
+
+        // 3. Serve the clean, dependency-free UI page
+        res.send(`
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <title>Hierarchical Ltree Viewer</title>
+          <style>
+            body { font-family: -apple-system, sans-serif; padding: 3rem; background: #fafafa; color: #333; }
+            h1 { color: #111; margin-bottom: 0.5rem; }
+            .subtitle { color: #666; margin-bottom: 2rem; font-size: 0.9rem; }
+            ul { list-style-type: none; padding-left: 20px; border-left: 1px dashed #ccc; margin: 5px 0; }
+            li { margin: 8px 0; position: relative; }
+            .folder-name { font-weight: 600; color: #2c3e50; }
+            .path-tag { font-size: 0.75rem; color: #95a5a6; background: #eef2f3; padding: 2px 6px; border-radius: 4px; margin-left: 8px; font-family: monospace; }
+          </style>
+        </head>
+        <body>
+          <h1>Hierarchy Tree Explorer</h1>
+          <div class="subtitle">Connected to API target: <code>${API_URL}</code></div>
+          <div id="tree-container">
+            ${treeHTML || '<p>No root categories found. Add some paths to your ltree table!</p>'}
+          </div>
+        </body>
+      </html>
+    `);
+    } catch (error) {
+        console.error('Frontend error fetching data:', error);
+        res.status(500).send(`
+      <h1>500 Frontend Render Failure</h1>
+      <p>Could not reach your API application container. Verify that the API server is active on port 3000.</p>
+    `);
+    }
+});
+
+app.listen(PORT, () => {
+    console.log(`🌐 Frontend web server running smoothly on http://localhost:${PORT}`);
+});