feat: transform JSON terminal output into styled HTML list hierarchy in UI

code.html

@@ -164,23 +164,7 @@ SKU: JK-2024-WTR"></textarea>
 </div>
 </div>
 <div class="flex-1 p-4 overflow-auto custom-scrollbar font-mono text-sm leading-6">
-<pre><code class="language-json"><span class="text-slate-500">1</span>  <span class="text-yellow-500">{</span>
-<span class="text-slate-500">2</span>    <span class="text-primary">"product_analysis"</span><span class="text-white">:</span> <span class="text-yellow-500">{</span>
-<span class="text-slate-500">3</span>      <span class="text-primary">"title"</span><span class="text-white">:</span> <span class="text-sky-300">"Apex Terrain All-Weather Performance Jacket"</span><span class="text-white">,</span>
-<span class="text-slate-500">4</span>      <span class="text-primary">"category"</span><span class="text-white">:</span> <span class="text-sky-300">"Outerwear / Men's / Technical Shells"</span><span class="text-white">,</span>
-<span class="text-slate-500">5</span>      <span class="text-primary">"features"</span><span class="text-white">:</span> <span class="text-yellow-500">[</span>
-<span class="text-slate-500">6</span>        <span class="text-sky-300">"Gore-Tex Pro Membrane"</span><span class="text-white">,</span>
-<span class="text-slate-500">7</span>        <span class="text-sky-300">"Articulated Sleeves"</span><span class="text-white">,</span>
-<span class="text-slate-500">8</span>        <span class="text-sky-300">"Helmet-Compatible Hood"</span>
-<span class="text-slate-500">9</span>      <span class="text-yellow-500">]</span><span class="text-white">,</span>
-<span class="text-slate-500">10</span>     <span class="text-primary">"seo_tags"</span><span class="text-white">:</span> <span class="text-yellow-500">[</span>
-<span class="text-slate-500">11</span>       <span class="text-sky-300">"#hikinggear"</span><span class="text-white">,</span> <span class="text-sky-300">"#waterproof"</span><span class="text-white">,</span> <span class="text-sky-300">"#adventure"</span>
-<span class="text-slate-500">12</span>     <span class="text-yellow-500">]</span><span class="text-white">,</span>
-<span class="text-slate-500">13</span>     <span class="text-primary">"sentiment_score"</span><span class="text-white">:</span> <span class="text-purple-400">0.98</span><span class="text-white">,</span>
-<span class="text-slate-500">14</span>     <span class="text-primary">"market_fit"</span><span class="text-white">:</span> <span class="text-sky-300">"High Demand"</span>
-<span class="text-slate-500">15</span>   <span class="text-yellow-500">}</span><span class="text-white">,</span>
-<span class="text-slate-500">16</span>   <span class="text-primary">"deployment_status"</span><span class="text-white">:</span> <span class="text-sky-300">"Ready"</span>
-<span class="text-slate-500">17</span> <span class="text-yellow-500">}</span></code></pre>
+<div id="jsonOutput" class="w-full"></div>
 </div>
 </div>
 </div>
@@ -195,6 +179,60 @@ SKU: JK-2024-WTR"></textarea>
                 '100%': { left: '125%' },
             }
         }
+        
+        const INITIAL_DATA = {
+            "product_analysis": {
+                "title": "Apex Terrain All-Weather Performance Jacket",
+                "category": "Outerwear / Men's / Technical Shells",
+                "features": ["Gore-Tex Pro Membrane", "Articulated Sleeves", "Helmet-Compatible Hood"],
+                "seo_tags": ["#hikinggear", "#waterproof", "#adventure"],
+                "sentiment_score": 0.98,
+                "market_fit": "High Demand"
+            },
+            "deployment_status": "Ready"
+        };
+        window.__currentJSONData = INITIAL_DATA;
+
+        function jsonToHTMLList(data, isRoot = true) {
+            if (typeof data !== 'object' || data === null) {
+                return `<span class="text-slate-300 break-words">${data}</span>`;
+            }
+            
+            const isArray = Array.isArray(data);
+            let html = `<ul class="space-y-2 ${isRoot ? '' : 'pl-4 lg:pl-6 border-l border-border-dark mt-2'}">`;
+            
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    const value = data[key];
+                    const isValueObject = typeof value === 'object' && value !== null;
+                    
+                    html += `<li class="relative">`;
+                    
+                    if (!isRoot) {
+                       html += `<span class="absolute -left-[20px] lg:-left-[28px] top-2.5 size-1.5 rounded-full bg-primary/50"></span>`;
+                    }
+                    
+                    if (!isArray) {
+                        html += `<strong class="text-primary font-semibold mr-2">${key}:</strong>`;
+                    }
+                    
+                    if (isValueObject) {
+                        html += `<div class="mt-1">${jsonToHTMLList(value, false)}</div>`;
+                    } else {
+                        if (isArray) {
+                            html += `<span class="inline-block bg-primary/10 border border-primary/20 rounded-full px-2.5 py-0.5 text-xs text-sky-300 mt-1">${value}</span>`;
+                        } else {
+                            html += `<span class="text-slate-300 break-words">${value}</span>`;
+                        }
+                    }
+                    html += `</li>`;
+                }
+            }
+            html += `</ul>`;
+            return html;
+        }
+
+        document.getElementById('jsonOutput').innerHTML = jsonToHTMLList(window.__currentJSONData);
     </script>
 
 </body></html>

dashboard.html

@@ -258,23 +258,7 @@
 </div>
 </div>
 <div class="flex-1 p-4 lg:p-5 overflow-auto custom-scrollbar font-mono text-xs lg:text-sm leading-6 lg:leading-7">
-<pre><code class="language-json block" id="jsonOutput"><span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">01</span><span class="text-amber-400">{</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">02</span>  <span class="text-amber-600">"product_analysis"</span><span class="text-neutral-400">:</span> <span class="text-amber-400">{</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">03</span>    <span class="text-amber-600">"title"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Noir Elite Series Artisan Timepiece"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">04</span>    <span class="text-amber-600">"category"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Luxury / Accessories"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">05</span>    <span class="text-amber-600">"features"</span><span class="text-neutral-400">:</span> <span class="text-amber-400">[</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">06</span>      <span class="text-amber-200">"Obsidian Finish"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">07</span>      <span class="text-amber-200">"Golden Accents"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">08</span>      <span class="text-amber-200">"Smart Haptic Interface"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">09</span>    <span class="text-amber-400">]</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">10</span>    <span class="text-amber-600">"seo_tags"</span><span class="text-neutral-400">:</span> <span class="text-amber-400">[</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">11</span>      <span class="text-amber-200">"#luxurywear"</span><span class="text-neutral-400">,</span> <span class="text-amber-200">"#amberstyle"</span><span class="text-neutral-400">,</span> <span class="text-amber-200">"#premiumtech"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">12</span>    <span class="text-amber-400">]</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">13</span>    <span class="text-amber-600">"sentiment_score"</span><span class="text-neutral-400">:</span> <span class="text-amber-500">0.99</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">14</span>    <span class="text-amber-600">"market_fit"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Exceptional"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">15</span>  <span class="text-amber-400">}</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">16</span>  <span class="text-amber-600">"deployment_status"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Authorized"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">17</span><span class="text-amber-400">}</span></code></pre>
+<div id="jsonOutput" class="w-full"></div>
 </div>
 </div>
 </div>
@@ -288,6 +272,57 @@
     tailwind.config.theme.extend.keyframes = {
         shine: { '0%': { left: '-100%' }, '100%': { left: '200%' } }
     }
+    const INITIAL_DATA = {
+        "product_analysis": {
+            "title": "Noir Elite Series Artisan Timepiece",
+            "category": "Luxury / Accessories",
+            "features": ["Obsidian Finish", "Golden Accents", "Smart Haptic Interface"],
+            "seo_tags": ["#luxurywear", "#amberstyle", "#premiumtech"],
+            "sentiment_score": 0.99,
+            "market_fit": "Exceptional"
+        },
+        "deployment_status": "Authorized"
+    };
+    window.__currentJSONData = INITIAL_DATA;
+
+    function jsonToHTMLList(data, isRoot = true) {
+        if (typeof data !== 'object' || data === null) {
+            return `<span class="text-neutral-300 break-words">${data}</span>`;
+        }
+        
+        const isArray = Array.isArray(data);
+        let html = `<ul class="space-y-2 ${isRoot ? '' : 'pl-4 lg:pl-6 border-l border-white/10 mt-2'}">`;
+        
+        for (const key in data) {
+            if (data.hasOwnProperty(key)) {
+                const value = data[key];
+                const isValueObject = typeof value === 'object' && value !== null;
+                
+                html += `<li class="relative">`;
+                
+                if (!isRoot) {
+                   html += `<span class="absolute -left-[20px] lg:-left-[28px] top-2.5 size-1.5 rounded-full bg-amber-500/50"></span>`;
+                }
+                
+                if (!isArray) {
+                    html += `<strong class="text-amber-400 font-semibold mr-2">${key}:</strong>`;
+                }
+                
+                if (isValueObject) {
+                    html += `<div class="mt-1">${jsonToHTMLList(value, false)}</div>`;
+                } else {
+                    if (isArray) {
+                        html += `<span class="inline-block bg-amber-500/10 border border-amber-500/20 rounded-full px-2.5 py-0.5 text-xs text-amber-200 mt-1">${value}</span>`;
+                    } else {
+                        html += `<span class="text-neutral-300 break-words">${value}</span>`;
+                    }
+                }
+                html += `</li>`;
+            }
+        }
+        html += `</ul>`;
+        return html;
+    }
 const dropZone = document.getElementById('dropZone');
 const fileInput = document.getElementById('fileInput');
 const startBtn = document.getElementById('startBtn');
@@ -373,7 +408,8 @@ startBtn.addEventListener('click', async (e) => {
         const response = await fetch('/generate-catalog', { method: 'POST', body: formData });
         if (!response.ok) throw new Error("Server Error " + response.status);
         const data = await response.json();
-        jsonOutput.textContent = JSON.stringify(data, null, 2);
+        window.__currentJSONData = data;
+        jsonOutput.innerHTML = jsonToHTMLList(data);
         isCatalogGenerated = true;
     } catch (error) {
         console.error("Agent Error:", error); alert("Pipeline failed: " + error.message);
@@ -382,11 +418,27 @@ startBtn.addEventListener('click', async (e) => {
     }
 });
 copyBtn.addEventListener('click', () => {
-    navigator.clipboard.writeText(jsonOutput.innerText).then(() => {
+    navigator.clipboard.writeText(JSON.stringify(window.__currentJSONData, null, 2)).then(() => {
         const originalIcon = copyIcon.innerText; copyIcon.innerText = 'check'; copyIcon.classList.add('text-green-400');
         setTimeout(() => { copyIcon.innerText = originalIcon; copyIcon.classList.remove('text-green-400'); }, 2000);
     });
 });
+
+const downloadBtn = document.getElementById('downloadBtn');
+if (downloadBtn) {
+    downloadBtn.addEventListener('click', () => {
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(window.__currentJSONData, null, 2));
+        const downloadAnchorNode = document.createElement('a');
+        downloadAnchorNode.setAttribute("href", dataStr);
+        downloadAnchorNode.setAttribute("download", "stylesync_output.json");
+        document.body.appendChild(downloadAnchorNode);
+        downloadAnchorNode.click();
+        downloadAnchorNode.remove();
+    });
+}
+
+// Initialize placeholder data
+jsonOutput.innerHTML = jsonToHTMLList(window.__currentJSONData);
 </script>
 </body>
 </html>

glassui.html

@@ -254,23 +254,7 @@
 </div>
 </div>
 <div class="flex-1 p-4 lg:p-5 overflow-auto custom-scrollbar font-mono text-xs lg:text-sm leading-6 lg:leading-7">
-<pre><code class="language-json block" id="jsonOutput"><span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">01</span><span class="text-amber-400">{</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">02</span>  <span class="text-amber-600">"product_analysis"</span><span class="text-neutral-400">:</span> <span class="text-amber-400">{</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">03</span>    <span class="text-amber-600">"title"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Noir Elite Series Artisan Timepiece"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">04</span>    <span class="text-amber-600">"category"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Luxury / Accessories"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">05</span>    <span class="text-amber-600">"features"</span><span class="text-neutral-400">:</span> <span class="text-amber-400">[</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">06</span>      <span class="text-amber-200">"Obsidian Finish"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">07</span>      <span class="text-amber-200">"Golden Accents"</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">08</span>      <span class="text-amber-200">"Smart Haptic Interface"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">09</span>    <span class="text-amber-400">]</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">10</span>    <span class="text-amber-600">"seo_tags"</span><span class="text-neutral-400">:</span> <span class="text-amber-400">[</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">11</span>      <span class="text-amber-200">"#luxurywear"</span><span class="text-neutral-400">,</span> <span class="text-amber-200">"#amberstyle"</span><span class="text-neutral-400">,</span> <span class="text-amber-200">"#premiumtech"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">12</span>    <span class="text-amber-400">]</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">13</span>    <span class="text-amber-600">"sentiment_score"</span><span class="text-neutral-400">:</span> <span class="text-amber-500">0.99</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">14</span>    <span class="text-amber-600">"market_fit"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Exceptional"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">15</span>  <span class="text-amber-400">}</span><span class="text-neutral-400">,</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">16</span>  <span class="text-amber-600">"deployment_status"</span><span class="text-neutral-400">:</span> <span class="text-amber-200">"Authorized"</span>
-<span class="text-neutral-700 select-none mr-3 lg:mr-4 border-r border-neutral-800 pr-2">17</span><span class="text-amber-400">}</span></code></pre>
+<div id="jsonOutput" class="w-full"></div>
 </div>
 </div>
 </div>
@@ -289,6 +273,58 @@
                 '100%': { left: '200%' },
             }
         }
+        
+        const INITIAL_DATA = {
+            "product_analysis": {
+                "title": "Noir Elite Series Artisan Timepiece",
+                "category": "Luxury / Accessories",
+                "features": ["Obsidian Finish", "Golden Accents", "Smart Haptic Interface"],
+                "seo_tags": ["#luxurywear", "#amberstyle", "#premiumtech"],
+                "sentiment_score": 0.99,
+                "market_fit": "Exceptional"
+            },
+            "deployment_status": "Authorized"
+        };
+        window.__currentJSONData = INITIAL_DATA;
+
+        function jsonToHTMLList(data, isRoot = true) {
+            if (typeof data !== 'object' || data === null) {
+                return `<span class="text-neutral-300 break-words">${data}</span>`;
+            }
+            
+            const isArray = Array.isArray(data);
+            let html = `<ul class="space-y-2 ${isRoot ? '' : 'pl-4 lg:pl-6 border-l border-white/10 mt-2'}">`;
+            
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    const value = data[key];
+                    const isValueObject = typeof value === 'object' && value !== null;
+                    
+                    html += `<li class="relative">`;
+                    
+                    if (!isRoot) {
+                       html += `<span class="absolute -left-[20px] lg:-left-[28px] top-2.5 size-1.5 rounded-full bg-amber-500/50"></span>`;
+                    }
+                    
+                    if (!isArray) {
+                        html += `<strong class="text-amber-400 font-semibold mr-2">${key}:</strong>`;
+                    }
+                    
+                    if (isValueObject) {
+                        html += `<div class="mt-1">${jsonToHTMLList(value, false)}</div>`;
+                    } else {
+                        if (isArray) {
+                            html += `<span class="inline-block bg-amber-500/10 border border-amber-500/20 rounded-full px-2.5 py-0.5 text-xs text-amber-200 mt-1">${value}</span>`;
+                        } else {
+                            html += `<span class="text-neutral-300 break-words">${value}</span>`;
+                        }
+                    }
+                    html += `</li>`;
+                }
+            }
+            html += `</ul>`;
+            return html;
+        }
         const dropZone = document.getElementById('dropZone');
         const fileInput = document.getElementById('fileInput');
         const startBtn = document.getElementById('startBtn');
@@ -376,7 +412,7 @@
         }
 
         copyBtn.addEventListener('click', () => {
-            const textToCopy = jsonOutput.innerText;
+            const textToCopy = JSON.stringify(window.__currentJSONData, null, 2);
             navigator.clipboard.writeText(textToCopy).then(() => {
                 const originalIcon = copyIcon.innerText;
                 copyIcon.style.opacity = '0';
@@ -405,7 +441,7 @@
             });
         });
         downloadBtn.addEventListener('click', () => {
-            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(jsonOutput.innerText);
+            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(window.__currentJSONData, null, 2));
             const downloadAnchorNode = document.createElement('a');
             downloadAnchorNode.setAttribute("href", dataStr);
             downloadAnchorNode.setAttribute("download", "stylesync_output.json");
@@ -428,6 +464,9 @@
                 startBtn.classList.add('animate-pulse-slow', 'animate-glow-pulse');
             }, 1500);
         });
+
+        // Initialize placeholder data
+        jsonOutput.innerHTML = jsonToHTMLList(window.__currentJSONData);
     </script>
 
 </body></html>