vs-code-ext-from-any-js 1.15.4

package/src/V14/nodeJs/routesJs/v2/backend/forge/forgeEngine.js

@@ -0,0 +1,83 @@
+import * as vscode from 'vscode';
+
+export async function executeGenerationTask({
+    panel,
+    actionLabel,
+    tableName,
+    toPath,
+    generateFunc,
+    inFolderName
+}) {
+    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+    const postLog = (text, type = "info") => {
+        panel.webview.postMessage({
+            type: "log",
+            text,
+            logType: type
+        });
+    };
+
+    try {
+        panel.webview.postMessage({ type: "startGeneration" });
+
+        postLog("🌌 Initializing the Endpoint Forge...", "info");
+        await sleep(300);
+
+        postLog(`📜 Reading the blueprint schema for: "${tableName}"`, "info");
+        await sleep(250);
+
+        postLog("🛡️ Validating routing pathways and target directories...", "info");
+        await sleep(200);
+
+        postLog("🔥 Igniting the endpoint generator template engine...", "warning");
+        await sleep(200);
+
+        postLog("⚙️ Generating HTTP handlers (GET, POST, PUT, DELETE)...", "info");
+        const funcToRun = await generateFunc();
+
+        await funcToRun({
+            showLog: true,
+            isAnnounce: true,
+            folderName: inFolderName || "",
+            toPath,
+            tableName
+        });
+        await sleep(350);
+
+        postLog("🧪 Integrating routes.js imports and configurations...", "info");
+        await sleep(300);
+
+        postLog("✨ Polishing generated code and formatting files...", "info");
+        await sleep(250);
+
+        postLog("💖 Endpoint successfully materialized!", "success");
+        await sleep(200);
+
+        panel.webview.postMessage({
+            type: "complete",
+            html: `
+                <div class="space-y-3">
+                    <div class="flex items-center gap-2 text-green-400 font-semibold text-lg">
+                        <span class="animate-bounce">✨</span>
+                        <span>Endpoint Forged Successfully!</span>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2 text-sm bg-slate-900/60 p-3 rounded-lg border border-slate-700 font-mono">
+                        <div class="text-gray-400">Blueprint:</div>
+                        <div class="text-indigo-300 font-medium truncate">${tableName}</div>
+                        <div class="text-gray-400">Target Folder:</div>
+                        <div class="text-indigo-300 font-medium truncate">${inFolderName}</div>
+                        <div class="text-gray-400">Destination Path:</div>
+                        <div class="text-indigo-300 font-medium truncate" title="${toPath}">${toPath}</div>
+                    </div>
+                </div>
+            `
+        });
+    } catch (error) {
+        postLog(`🚨 Forge failed: ${error.message}`, "error");
+        panel.webview.postMessage({
+            type: "status",
+            text: `❌ Generation failed: ${error.message}`
+        });
+    }
+}

package/src/V14/nodeJs/routesJs/v2/backend/forge/routeScanner.js

@@ -0,0 +1,7 @@
+import getFolders from 'pattern-collector-routesjs-import-extract';
+
+const getFoldersFromImport = (toPath) => {
+    return getFolders({ filePath: toPath });
+};
+
+export default getFoldersFromImport;

package/src/V14/nodeJs/routesJs/v2/backend/forge/schemaScanner.js

@@ -0,0 +1,60 @@
+import fs from 'fs';
+import path from 'path';
+
+export function getSchemaFiles(schemasPath) {
+    if (schemasPath === undefined || !fs.existsSync(schemasPath)) {
+        return [];
+    }
+
+    return fs.readdirSync(schemasPath, { withFileTypes: true })
+        .filter((item) => item.isFile() && item.name.endsWith(".json"))
+        .sort((first, second) => first.name.localeCompare(second.name))
+        .map((item) => {
+            const filePath = path.join(schemasPath, item.name);
+            const fallbackTableName = path.basename(item.name, ".json");
+
+            try {
+                const schema = JSON.parse(fs.readFileSync(filePath, "utf8"));
+                let columns = [];
+
+                if (schema.columns) {
+                    if (Array.isArray(schema.columns)) {
+                        columns = schema.columns.map(c => {
+                            if (typeof c === 'string') return c;
+                            return c.columnName || c.name || JSON.stringify(c);
+                        });
+                    } else if (typeof schema.columns === 'object') {
+                        columns = Object.keys(schema.columns);
+                    }
+                } else if (schema.properties) {
+                    columns = Object.keys(schema.properties);
+                } else if (schema.fields) {
+                    if (Array.isArray(schema.fields)) {
+                        columns = schema.fields.map(f => {
+                            if (typeof f === 'string') return f;
+                            return f.fieldName || f.name || JSON.stringify(f);
+                        });
+                    } else if (typeof schema.fields === 'object') {
+                        columns = Object.keys(schema.fields);
+                    }
+                } else {
+                    const keys = Object.keys(schema).filter(k => k !== 'tableName');
+                    if (keys.length > 0 && keys.length < 50) {
+                        columns = keys;
+                    }
+                }
+
+                return {
+                    name: item.name,
+                    tableName: schema.tableName || fallbackTableName,
+                    columns: columns.slice(0, 15) // limit size for UI preview
+                };
+            } catch {
+                return {
+                    name: item.name,
+                    tableName: fallbackTableName,
+                    columns: []
+                };
+            }
+        });
+}

package/src/V14/nodeJs/routesJs/v2/backend/readHtml.js

@@ -0,0 +1,31 @@
+import * as vscode from 'vscode';
+
+import { getHtmlWithScripts } from "./core/htmlLoader.js";
+import { handleWebviewMessage } from "./core/messageRouter.js";
+import { getWorkspaceContext } from "./core/workspaceHelper.js";
+
+const activateHtml = (context, uri) => {
+    const panel = vscode.window.createWebviewPanel(
+        "showHtml",
+        "Show Html",
+        vscode.ViewColumn.One,
+        { enableScripts: true }
+    );
+
+    panel.webview.html = getHtmlWithScripts(panel.webview);
+
+    panel.webview.onDidReceiveMessage(async (message) => {
+        const { userRootFolder, schemasPath, folderPath, port } = getWorkspaceContext(uri);
+
+        await handleWebviewMessage({
+            message,
+            panel,
+            toPath: folderPath,
+            schemasPath,
+            port,
+            inTargetPath: userRootFolder
+        });
+    });
+};
+
+export default activateHtml;

package/src/V14/nodeJs/routesJs/v2/frontend/index.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Endpoint Forge</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Plus Jakarta Sans', sans-serif;
+        }
+        .font-mono {
+            font-family: 'JetBrains Mono', monospace;
+        }
+        /* Custom scrollbars */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(15, 23, 42, 0.3);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(99, 102, 241, 0.3);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(99, 102, 241, 0.5);
+        }
+        .glowing-button {
+            position: relative;
+            overflow: hidden;
+        }
+        .glowing-button::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                45deg,
+                transparent,
+                rgba(139, 92, 246, 0.2),
+                transparent
+            );
+            transform: rotate(45deg);
+            transition: 0.5s;
+            opacity: 0;
+        }
+        .glowing-button:hover::after {
+            opacity: 1;
+            left: 120%;
+        }
+    </style>
+</head>
+<body class="bg-[#0b0f19] text-slate-100 min-h-screen flex flex-col p-4 md:p-8 bg-radial-gradient">
+    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-900/20 via-slate-950 to-[#0b0f19] -z-10"></div>
+    
+    <div class="max-w-5xl mx-auto w-full flex-grow flex flex-col justify-start">
+        
+        <!-- Header -->
+        <header class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between border-b border-slate-800/60 pb-6 gap-4">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 rounded-xl bg-gradient-to-tr from-violet-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-violet-500/20 ring-1 ring-violet-400/30">
+                    <span class="text-2xl animate-pulse">🔥</span>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold tracking-tight bg-gradient-to-r from-violet-400 via-indigo-200 to-cyan-300 bg-clip-text text-transparent">
+                        The Endpoint Forge
+                    </h1>
+                    <p class="text-xs text-slate-400 mt-0.5">
+                        Breathe life into your data schemas and materialize them as API endpoints
+                    </p>
+                </div>
+            </div>
+            <div class="flex items-center gap-2 bg-slate-900/60 px-3.5 py-1.5 rounded-lg border border-slate-800/80">
+                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
+                <span class="text-xs text-slate-300 font-medium tracking-wide">FORGE ACTIVE</span>
+            </div>
+        </header>
+
+        <!-- Main Layout Split -->
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+            
+            <!-- Left Panel: Discovered Nodes & Blueprint Selector (7 cols) -->
+            <div class="lg:col-span-7 space-y-6">
+                
+                <!-- Step 1: Scan Realm -->
+                <section class="bg-slate-950/65 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl relative overflow-hidden">
+                    <div class="absolute top-0 right-0 w-24 h-24 bg-violet-600/5 rounded-full blur-2xl"></div>
+                    <div class="flex items-center gap-2.5 mb-4">
+                        <div class="w-6 h-6 rounded-md bg-violet-500/10 flex items-center justify-center text-xs font-semibold text-violet-400">1</div>
+                        <h2 class="text-sm font-semibold tracking-wide text-slate-200">ACTIVE API NODES PRESENT</h2>
+                    </div>
+                    <div id="folders-list-container" class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-48 overflow-y-auto pr-1">
+                        <!-- Filled dynamically by forgeController -->
+                    </div>
+                </section>
+
+                <!-- Step 2: Select Blueprint -->
+                <section class="bg-slate-950/65 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl relative">
+                    <div class="flex items-center gap-2.5 mb-4">
+                        <div class="w-6 h-6 rounded-md bg-violet-500/10 flex items-center justify-center text-xs font-semibold text-violet-400">2</div>
+                        <h2 class="text-sm font-semibold tracking-wide text-slate-200">CHOOSE DATABASE BLUEPRINT SCHEMA</h2>
+                    </div>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
+                        <!-- Left inside: Schema List (5 cols) -->
+                        <div class="md:col-span-5 space-y-2 max-h-60 overflow-y-auto pr-1" id="schemas-list-container">
+                            <!-- Filled dynamically by forgeController -->
+                        </div>
+
+                        <!-- Right inside: Blueprint Preview (7 cols) -->
+                        <div class="md:col-span-7">
+                            <div id="blueprint-preview-container" class="hidden h-full flex flex-col justify-between p-4 rounded-xl bg-slate-900/30 border border-slate-800/80">
+                                <div class="space-y-3">
+                                    <div class="flex items-center justify-between">
+                                        <span class="text-xs font-semibold text-slate-400 tracking-wider">BLUEPRINT MAP</span>
+                                        <span id="blueprint-columns-count" class="text-[10px] text-violet-400 font-mono bg-violet-500/10 px-2 py-0.5 rounded border border-violet-500/20">0 fields</span>
+                                    </div>
+                                    <h3 id="blueprint-title" class="text-sm font-bold text-slate-200 font-mono">Table</h3>
+                                    <div id="blueprint-columns-list" class="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto pt-1">
+                                        <!-- Filled dynamically by forgeController -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                
+            </div>
+
+            <!-- Right Panel: Forge Console & Execution (5 cols) -->
+            <div class="lg:col-span-5 space-y-6">
+                
+                <!-- Destination Name Input -->
+                <section class="bg-slate-950/65 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl relative">
+                    <div class="flex items-center gap-2.5 mb-4">
+                        <div class="w-6 h-6 rounded-md bg-violet-500/10 flex items-center justify-center text-xs font-semibold text-violet-400">3</div>
+                        <h2 class="text-sm font-semibold tracking-wide text-slate-200">DESTINATION TARGET</h2>
+                    </div>
+                    
+                    <div class="space-y-2">
+                        <label for="folder-name" class="block text-xs font-medium text-slate-400">
+                            Target folder name for endpoints
+                        </label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500">
+                                📁
+                            </div>
+                            <input type="text" id="folder-name" 
+                                class="block w-full pl-9 pr-3 py-2 bg-slate-900/60 border border-slate-800 hover:border-slate-700 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 rounded-lg text-xs font-mono text-slate-100 placeholder-slate-600 focus:outline-none transition-all"
+                                placeholder="Auto-populated target name">
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Trigger & Action Terminal -->
+                <section class="bg-slate-950/65 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl relative flex flex-col gap-4">
+                    <button onclick="triggerForgeProcess()" 
+                        class="glowing-button w-full py-3 px-4 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white text-xs font-semibold tracking-wider uppercase transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-600/20 active:scale-[0.98]">
+                        <span>⚒️</span>
+                        <span>Forge API Endpoint</span>
+                    </button>
+
+                    <!-- Status Display for general alert messages -->
+                    <div id="status" class="hidden rounded-xl border p-3.5 text-xs">
+                        <!-- Filled dynamically by uiPresenter -->
+                    </div>
+
+                    <!-- Cyberpunk Terminal Window -->
+                    <div id="terminal-container" class="hidden rounded-xl border border-slate-800 bg-[#070b13] overflow-hidden flex flex-col shadow-inner">
+                        <!-- Terminal Title Bar -->
+                        <div class="flex items-center justify-between px-3 py-2 bg-slate-900/80 border-b border-slate-800/60 select-none">
+                            <div class="flex items-center gap-1.5">
+                                <span class="w-2.5 h-2.5 rounded-full bg-rose-500/80"></span>
+                                <span class="w-2.5 h-2.5 rounded-full bg-amber-500/80"></span>
+                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500/80"></span>
+                            </div>
+                            <span class="text-[9px] font-mono text-slate-500 uppercase tracking-widest">FORGE-SHELL v1.14</span>
+                        </div>
+                        <!-- Terminal body logs -->
+                        <div id="terminal-body" class="p-3.5 space-y-1.5 h-44 overflow-y-auto pr-2 select-text">
+                            <!-- Filled dynamically by uiPresenter -->
+                        </div>
+                    </div>
+
+                    <!-- Final Completion summary card -->
+                    <div id="summary" class="hidden rounded-xl border border-slate-800 bg-slate-900/20 p-4 shadow-inner">
+                        <!-- Filled dynamically by uiPresenter -->
+                    </div>
+                </section>
+                
+            </div>
+
+        </div>
+
+    </div>
+</body>
+</html>

package/src/V14/nodeJs/routesJs/v2/frontend/js/forgeActions.js

@@ -0,0 +1,48 @@
+import { sendAction } from "./vscodeBridge.js";
+import { showError, clearTerminal } from "./uiPresenter.js";
+
+function getSelectedTableName() {
+    return window.selectedTableName || "";
+}
+
+function getFolderName() {
+    const folderInput = document.getElementById("folder-name");
+    return folderInput ? folderInput.value.trim() : "";
+}
+
+export function triggerForgeProcess() {
+    const tableName = getSelectedTableName();
+    if (!tableName) {
+        showError("Please select a blueprint schema first.");
+        return;
+    }
+
+    let folderName = getFolderName();
+    if (!folderName) {
+        folderName = tableName;
+        const folderInput = document.getElementById("folder-name");
+        if (folderInput) folderInput.value = folderName;
+    }
+
+    const existingFolders = window.foldersAlreadyPresentList || [];
+    const isExist = existingFolders.some(loopFolder => loopFolder.folderName === folderName);
+
+    if (isExist) {
+        showError(`Folder "${folderName}" already exists! Please enter a unique folder name.`);
+        return;
+    }
+
+    const summaryDiv = document.getElementById("summary");
+    if (summaryDiv) summaryDiv.classList.add("hidden");
+    
+    clearTerminal();
+    
+    const terminalContainer = document.getElementById("terminal-container");
+    if (terminalContainer) terminalContainer.classList.remove("hidden");
+
+    sendAction("addTableName", { tableName, inFolderName: folderName });
+}
+
+export function addTableName() {
+    triggerForgeProcess();
+}

package/src/V14/nodeJs/routesJs/v2/frontend/js/forgeController.js

@@ -0,0 +1,203 @@
+import { sendAction } from "./vscodeBridge.js";
+import { showStatus, showError, showSummary, completeStatus, clearTerminal, appendTerminalLog } from "./uiPresenter.js";
+import { triggerForgeProcess, addTableName } from "./forgeActions.js";
+
+// Expose handlers to global scope for HTML inline bindings
+window.triggerForgeProcess = triggerForgeProcess;
+window.addTableName = addTableName;
+
+window.selectedTableName = "";
+window.schemasList = [];
+
+window.addEventListener("message", ({ data }) => {
+    if (data.type === "status") {
+        showStatus(data.text);
+    }
+    if (data.type === "summary") {
+        showSummary(data.html);
+    }
+    if (data.type === "complete") {
+        completeStatus(data.html);
+    }
+    if (data.type === "log") {
+        appendTerminalLog(data.text, data.logType);
+    }
+    if (data.type === "startGeneration") {
+        clearTerminal();
+        const statusDiv = document.getElementById("status");
+        if (statusDiv) statusDiv.classList.add("hidden");
+    }
+
+    if (data.type === "showFolders") {
+        window.foldersAlreadyPresentList = data.foldersAlreadyPresent || [];
+        window.schemasList = data.schemas || [];
+        
+        renderFolders();
+        renderSchemas();
+    }
+});
+
+function renderFolders() {
+    const container = document.getElementById("folders-list-container");
+    if (!container) return;
+
+    container.innerHTML = "";
+    const list = window.foldersAlreadyPresentList;
+
+    if (list && list.length > 0) {
+        list.forEach(loopFolder => {
+            const card = document.createElement("div");
+            card.className = "group relative flex items-center justify-between p-3 rounded-lg bg-slate-900/40 border border-slate-800/80 hover:border-violet-500/50 hover:bg-slate-800/40 transition-all duration-300";
+
+            const info = document.createElement("div");
+            info.className = "flex flex-col gap-0.5 truncate";
+
+            const name = document.createElement("span");
+            name.className = "font-mono font-medium text-xs text-slate-200 truncate";
+            name.textContent = loopFolder.folderName;
+            name.title = loopFolder.folderName;
+
+            const sub = document.createElement("span");
+            sub.className = "text-[10px] text-slate-500 font-mono";
+            sub.textContent = `router as ${loopFolder.variable || 'router'}`;
+
+            info.appendChild(name);
+            info.appendChild(sub);
+
+            const badge = document.createElement("span");
+            badge.className = "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20";
+            badge.textContent = "active";
+
+            card.appendChild(info);
+            card.appendChild(badge);
+            container.appendChild(card);
+        });
+    } else {
+        container.innerHTML = `
+            <div class="col-span-full flex flex-col items-center justify-center p-6 text-slate-500 bg-slate-900/20 rounded-xl border border-dashed border-slate-800">
+                <span class="text-2xl mb-1">📭</span>
+                <span class="text-xs italic">No existing API nodes found in routes.js</span>
+            </div>
+        `;
+    }
+}
+
+function renderSchemas() {
+    const container = document.getElementById("schemas-list-container");
+    if (!container) return;
+
+    container.innerHTML = "";
+    const schemas = window.schemasList;
+
+    if (schemas && schemas.length > 0) {
+        schemas.forEach(schema => {
+            const card = document.createElement("button");
+            card.type = "button";
+            card.className = "w-full text-left p-3 rounded-lg bg-slate-900/40 border border-slate-800/80 hover:border-violet-500/50 hover:bg-slate-800/40 transition-all duration-300 flex items-center justify-between group cursor-pointer focus:outline-none";
+            card.id = `schema-card-${schema.tableName}`;
+            
+            card.addEventListener("click", () => selectSchema(schema));
+
+            const left = document.createElement("div");
+            left.className = "flex items-center gap-3 truncate";
+
+            const icon = document.createElement("div");
+            icon.className = "w-8 h-8 rounded-lg bg-violet-600/10 flex items-center justify-center text-violet-400 group-hover:bg-violet-600/20 transition-colors flex-shrink-0 border border-violet-500/10";
+            icon.textContent = "📊";
+
+            const details = document.createElement("div");
+            details.className = "flex flex-col gap-0.5 truncate";
+
+            const name = document.createElement("span");
+            name.className = "font-medium text-xs text-slate-200 group-hover:text-violet-300 transition-colors truncate";
+            name.textContent = schema.tableName;
+
+            const sub = document.createElement("span");
+            sub.className = "text-[10px] text-slate-500 font-mono truncate";
+            sub.textContent = schema.name;
+
+            details.appendChild(name);
+            details.appendChild(sub);
+            left.appendChild(icon);
+            left.appendChild(details);
+
+            const arrow = document.createElement("span");
+            arrow.className = "text-slate-600 group-hover:text-violet-400 transition-colors text-xs font-bold";
+            arrow.textContent = "→";
+
+            card.appendChild(left);
+            card.appendChild(arrow);
+            container.appendChild(card);
+        });
+        
+        if (!window.selectedTableName) {
+            selectSchema(schemas[0]);
+        }
+    } else {
+        container.innerHTML = `
+            <div class="flex flex-col items-center justify-center p-6 text-slate-500 bg-slate-900/20 rounded-xl border border-dashed border-slate-800">
+                <span class="text-2xl mb-1">📂</span>
+                <span class="text-xs italic">No schema blueprints found in Config/Schemas</span>
+            </div>
+        `;
+    }
+}
+
+function selectSchema(schema) {
+    window.schemasList.forEach(s => {
+        const c = document.getElementById(`schema-card-${s.tableName}`);
+        if (c) {
+            c.classList.remove("border-violet-500", "bg-violet-950/20", "ring-1", "ring-violet-500/30");
+            c.classList.add("border-slate-800/80", "bg-slate-900/40");
+        }
+    });
+
+    const activeCard = document.getElementById(`schema-card-${schema.tableName}`);
+    if (activeCard) {
+        activeCard.classList.remove("border-slate-800/80", "bg-slate-900/40");
+        activeCard.classList.add("border-violet-500", "bg-violet-950/20", "ring-1", "ring-violet-500/30");
+    }
+
+    window.selectedTableName = schema.tableName;
+
+    const folderInput = document.getElementById("folder-name");
+    if (folderInput) {
+        folderInput.value = schema.tableName;
+    }
+
+    renderBlueprintPreview(schema);
+}
+
+function renderBlueprintPreview(schema) {
+    const previewContainer = document.getElementById("blueprint-preview-container");
+    if (!previewContainer) return;
+
+    previewContainer.classList.remove("hidden");
+    
+    const titleEl = document.getElementById("blueprint-title");
+    if (titleEl) titleEl.textContent = schema.tableName;
+    
+    const countEl = document.getElementById("blueprint-columns-count");
+    if (countEl) {
+        const count = schema.columns ? schema.columns.length : 0;
+        countEl.textContent = `${count} field${count === 1 ? '' : 's'} parsed`;
+    }
+
+    const columnsList = document.getElementById("blueprint-columns-list");
+    if (!columnsList) return;
+
+    columnsList.innerHTML = "";
+    
+    if (schema.columns && schema.columns.length > 0) {
+        schema.columns.forEach(col => {
+            const pill = document.createElement("span");
+            pill.className = "inline-flex items-center px-2.5 py-1 rounded bg-slate-800/60 text-slate-300 font-mono text-[10px] border border-slate-700/60 hover:bg-slate-700/40 hover:text-slate-100 transition-colors";
+            pill.textContent = col;
+            columnsList.appendChild(pill);
+        });
+    } else {
+        columnsList.innerHTML = `<span class="text-xs italic text-slate-500">No columns or properties extracted.</span>`;
+    }
+}
+
+sendAction("loadSchemas");