shokupan 0.7.0 → 0.9.0

package/dist/plugins/application/dashboard/static/registry.css

@@ -0,0 +1,131 @@
+.tree-node {
+    margin-left: 1rem;
+    border-left: 1px solid #40516a;
+    padding-left: 1rem;
+}
+
+.tree-item {
+    margin: 0.25rem 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.tree-icon {
+    color: var(--text-secondary);
+    font-size: 0.8em;
+}
+
+.tree-label {
+    color: var(--text-primary);
+}
+
+.tree-meta {
+    color: var(--text-secondary);
+    font-size: 0.8em;
+    margin-left: 0.5rem;
+    font-style: italic;
+}
+
+.path-param {
+    color: var(--text-emphasis);
+}
+
+.path-end,
+.path-param {
+    font-weight: bold;
+}
+
+.badge {
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.7em;
+    font-weight: bold;
+}
+
+.badge-GET {
+    background: #0f172a;
+    color: #3b82f6;
+    border: 1px solid #3b82f6;
+}
+
+.badge-POST {
+    background: #0f172a;
+    color: #22c55e;
+    border: 1px solid #22c55e;
+}
+
+.badge-PUT {
+    background: #0f172a;
+    color: #eab308;
+    border: 1px solid #eab308;
+}
+
+.badge-PATCH {
+    background: #0f172a;
+    color: #08d3ea;
+    border: 1px solid #08eae6;
+}
+
+.badge-HEAD {
+    background: #0f172a;
+    color: #e3ea08;
+    border: 1px solid #e3ea08;
+}
+
+.badge-OPTIONS {
+    background: #0f172a;
+    color: #838383;
+    border: 1px solid #838383;
+}
+
+.badge-DELETE {
+    background: #0f172a;
+    color: #ef4444;
+    border: 1px solid #ef4444;
+}
+
+.badge-ROUTER {
+    background: #334155;
+    color: #f8fafc;
+}
+
+.badge-CONTROLLER {
+    background: #475569;
+    color: #f8fafc;
+}
+
+
+/* Tooltip Styling */
+.tooltip {
+    position: relative;
+    display: block;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 220px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    text-align: left;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1000;
+    bottom: 125%;
+    /* Position above */
+    left: 50%;
+    margin-left: -110px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    border: 1px solid var(--card-border);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    backdrop-filter: blur(12px);
+    font-size: 0.85rem;
+    pointer-events: none;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}

package/dist/plugins/application/dashboard/static/registry.js

@@ -0,0 +1,269 @@
+
+window.renderRegistry = function renderRegistry(node, container) {
+    const rootPath = "<%~ it.rootPath %>";
+    const linkPattern = "<%~ it.linkPattern %>";
+
+    if (!node) {
+        container.innerHTML = '<div style="color: var(--text-secondary)">No registry data available</div>';
+        return;
+    }
+
+    const wrapper = document.createElement('div');
+
+    // Helper to clean paths
+    const cleanPath = (p) => {
+        if (!p) return '';
+        if (p.startsWith(rootPath)) return p.slice(rootPath.length + 1);
+        return p;
+    };
+
+    // Helper to create file link
+    const createFileMeta = (metadata, defaultName) => {
+        if (metadata && metadata.file) {
+            const relative = cleanPath(metadata.file);
+            const absolute = metadata.file;
+            const line = metadata.line;
+
+            // Generate Link
+            let link = linkPattern
+                .replace('{{absolute}}', absolute)
+                .replace('{{relative}}', relative)
+                .replace('{{line}}', line);
+
+            const name = metadata.name || defaultName;
+
+            // Label Filtering
+            const blocklist = ['wrappedHandler', 'anonymous', 'finalHandler', 'routeHandler'];
+            let displayNameStr = '';
+            if (name && !blocklist.includes(name)) {
+                displayNameStr = ` <span style="color: #94a3b8; font-size: 0.8em;">(${name})</span>`;
+            }
+
+            const builtin = metadata.isBuiltin ? `<span class="badge" style="background: #059669; margin-left:10px;">BUILTIN</span>` : '';
+            const pluginName = metadata.pluginName ? `<span style="color: #6ee7b7; margin-left: 5px;">[${metadata.pluginName}]</span>` : '';
+
+            return `<a href="${link}" target="_blank" style="text-decoration: none; color: inherit;"><span class="tree-meta" style="cursor: pointer; text-decoration: underline;">${relative}:${line}</span></a>${displayNameStr} ${builtin} ${pluginName}`;
+        }
+        return '';
+    };
+
+    // 1. Flatten all items
+    const allItems = [];
+    if (node.middleware) node.middleware.forEach(i => allItems.push({ ...i, kind: 'middleware' }));
+    if (node.routes) node.routes.forEach(i => allItems.push({ ...i, kind: 'route' }));
+    if (node.routers) node.routers.forEach(i => allItems.push({ ...i, kind: 'router' }));
+    if (node.controllers) node.controllers.forEach(i => allItems.push({ ...i, kind: 'controller' }));
+
+    // 2. Sort by Order
+    const kindPriority = { 'middleware': 0, 'router': 1, 'controller': 2, 'route': 3 };
+    allItems.sort((a, b) => {
+        const pA = kindPriority[a.kind] !== undefined ? kindPriority[a.kind] : 99;
+        const pB = kindPriority[b.kind] !== undefined ? kindPriority[b.kind] : 99;
+        if (pA !== pB) return pA - pB;
+        return (a.order || 0) - (b.order || 0);
+    });
+
+    // Deduplication (by ID if available, or path+method)
+    const uniqueItems = [];
+    const seenIds = new Set();
+    allItems.forEach(item => {
+        const uniqueKey = item.id || (item.kind + ':' + (item.path || item.name));
+        if (!seenIds.has(uniqueKey)) {
+            seenIds.add(uniqueKey);
+            uniqueItems.push(item);
+        }
+    });
+    // Replace allItems with deduplicated list
+    allItems.length = 0;
+    allItems.push(...uniqueItems);
+
+    // 3. Render
+    const renderedRoutes = new Set(); // Track rendered routes to avoid duplication when grouping
+
+    // Let's rebuild the controller groups map using the flattened objects
+    const controllerGroups = new Map();
+    allItems.forEach(item => {
+        if (item.kind === 'route' && item.tags && item.tags.length > 0) {
+            const tag = item.tags[0];
+            if (!controllerGroups.has(tag)) controllerGroups.set(tag, []);
+            controllerGroups.get(tag).push(item);
+        }
+    });
+
+    function getTooltipHtml(id) {
+        // Return default 0 metrics if not found, rather than empty string, so tooltip always appears if intended
+        const metrics = window.metrics || {};
+        const m = (metrics.nodeMetrics && metrics.nodeMetrics[id]) ? metrics.nodeMetrics[id] : { requests: 0, failures: 0 };
+        const totalReqs = metrics.totalRequests || 1; // avoid div/0
+        const percent = ((m.requests / totalReqs) * 100).toFixed(1);
+        const failRate = m.requests > 0 ? ((m.failures / m.requests) * 100).toFixed(1) : '0.0';
+
+        return `
+            <div class="tooltip-text">
+                <div style="font-weight:bold; margin-bottom:4px; border-bottom:1px solid var(--text-secondary); padding-bottom:2px;">Metrics</div>
+                <div style="display:flex; justify-content:space-between;"><span>Requests:</span> <span style="font-family:monospace">${m.requests}</span></div>
+                <div style="display:flex; justify-content:space-between;"><span>Traffic:</span> <span style="font-family:monospace">${percent}%</span></div>
+                <div style="display:flex; justify-content:space-between;"><span>Failures:</span> <span style="font-family:monospace; color:${m.failures > 0 ? '#ef4444' : 'inherit'}">${m.failures} (${failRate}%)</span></div>
+            </div>
+        `;
+    }
+
+    function renderPath(path) {
+        const parts = path.split('/').slice(1);
+
+        let out = '';
+        parts.forEach((part, index) => {
+            if (part.startsWith(":")) {
+                out += `/<span class="path-segment path-param">${part}</span>`;
+                return;
+            }
+            if (index === parts.length - 1) {
+                out += `/<span class="path-segment path-end">${part}</span>`;
+                return;
+            };
+            out += `/<span class="path-segment">${part}</span>`;
+        });
+
+        return out;
+    }
+
+    allItems.forEach(item => {
+        // Middleware
+        if (item.kind === 'middleware') {
+            const div = document.createElement('div');
+            const mwContainer = document.createElement('div');
+            mwContainer.className = 'tree-node';
+
+            const mwDiv = document.createElement('div');
+            mwDiv.className = 'tree-item tooltip'; // Add tooltip class
+            const meta = createFileMeta(item.metadata, item.name);
+            const tooltipHtml = getTooltipHtml(item.id);
+            mwDiv.innerHTML = `<span class="badge" style="background: #9333ea; color: white;">MIDDLEWARE</span> <span class="tree-label">${item.name}</span>${meta}${tooltipHtml}`;
+
+            mwContainer.appendChild(mwDiv);
+            div.appendChild(mwDiv);
+            wrapper.appendChild(div);
+        }
+
+        // Router
+        else if (item.kind === 'router') {
+            const div = document.createElement('div');
+            const header = document.createElement('div');
+            header.className = 'tree-item tooltip'; // Add tooltip class
+            const meta = createFileMeta(item.metadata, 'Router');
+            const tooltipHtml = getTooltipHtml(item.id);
+            header.innerHTML = `
+                <span class="badge badge-ROUTER">ROUTER</span>
+                <span class="tree-label">${renderPath(item.path)}</span>
+                ${meta}
+                ${tooltipHtml}
+            `;
+            div.appendChild(header);
+
+            if (item.children) {
+                const childrenContainer = document.createElement('div');
+                childrenContainer.className = 'tree-node';
+                renderRegistry(item.children, childrenContainer);
+                div.appendChild(childrenContainer);
+            }
+            wrapper.appendChild(div);
+        }
+
+        // Controller
+        else if (item.kind === 'controller') {
+            // Render Controller Group
+            const name = item.name;
+            const cPath = item.path || '';
+
+            // Render Header
+            const div = document.createElement('div');
+            const header = document.createElement('div');
+            header.className = 'tree-item tooltip'; // Add tooltip class
+            const meta = createFileMeta(item.metadata, name);
+            const tooltipHtml = getTooltipHtml(item.id);
+            header.innerHTML = `
+                <span class="badge badge-CONTROLLER">CTRL</span>
+                <span class="tree-label" style="font-weight: bold;">${name} <span style="color:var(--text-secondary); font-weight:normal;">(${renderPath(cPath)})</span></span>
+                ${meta}
+                ${tooltipHtml}
+            `;
+            div.appendChild(header);
+
+            // Render Routes belonging to this controller
+            const routes = item.children.routes || [];
+            if (routes.length > 0) {
+                const routesContainer = document.createElement('div');
+                routesContainer.className = 'tree-node';
+
+                routes.forEach(r => {
+                    renderedRoutes.add(r); // Mark as rendered
+
+                    const rDiv = document.createElement('div');
+                    rDiv.className = 'tree-item tooltip'; // Add tooltip class
+                    const method = r.method.toUpperCase();
+                    const badgeClass = `badge-${method}`;
+                    const rMeta = createFileMeta(r.metadata, r.handlerName);
+                    const tHtml = getTooltipHtml(r.id);
+                    rDiv.innerHTML = `
+                        <span class="badge ${badgeClass}" style="width: 50px; text-align: center; display: inline-block;">${method}</span>
+                        <span class="tree-label">${renderPath(r.path)}</span>
+                        ${rMeta}
+                        ${tHtml}
+                    `;
+                    routesContainer.appendChild(rDiv);
+                });
+                div.appendChild(routesContainer);
+            } else {
+                // Empty controller or no tagged routes found
+                // It's still valid to show it
+                const note = document.createElement('div');
+                note.className = 'tree-node';
+                note.innerHTML = '<span style="color: #64748b; font-style: italic;">(No routes detected)</span>';
+                div.appendChild(note);
+            }
+            wrapper.appendChild(div);
+        }
+
+        // Route (Loose)
+        else if (item.kind === 'route') {
+            if (renderedRoutes.has(item)) return; // Skip if already rendered in controller
+
+            const div = document.createElement('div');
+            div.className = 'tree-item tooltip'; // Add tooltip class
+            const method = item.method.toUpperCase();
+            const badgeClass = `badge-${method}`;
+            const meta = createFileMeta(item.metadata, item.handlerName);
+            const tHtml = getTooltipHtml(item.id);
+
+            div.innerHTML = `
+                <span class="badge ${badgeClass}" style="width: 50px; text-align: center; display: inline-block;">${method}</span>
+                <span class="tree-label">${renderPath(item.path)}</span>
+                ${meta}
+                ${tHtml}
+            `;
+            wrapper.appendChild(div);
+        }
+    });
+    container.innerHTML = '';
+    container.appendChild(wrapper);
+};
+
+window.fetchRegistry = async function fetchRegistry() {
+    const registryContainer = document.getElementById('registry-tree');
+    if (!registryContainer) return;
+
+    const headers = typeof getRequestHeaders !== 'undefined' ? getRequestHeaders() : {};
+    const basePath = window.location.pathname.endsWith('/') ? window.location.pathname.slice(0, -1) : window.location.pathname;
+    const url = basePath + '/registry';
+
+    try {
+        const res = await fetch(url, { headers });
+        const { registry } = await res.json();
+        renderRegistry(window.registryData = registry, registryContainer);
+    } catch (e) {
+        console.error("Failed to fetch registry", e);
+    }
+};
+
+document.addEventListener('DOMContentLoaded', fetchRegistry);
+

package/dist/plugins/application/dashboard/static/requests.js

@@ -0,0 +1,118 @@
+
+// Initialize Requests Table
+let requestsTable;
+
+document.addEventListener('DOMContentLoaded', () => {
+    requestsTable = new Tabulator("#requests-list-container", {
+        layout: "fitColumns",
+        placeholder: "No requests found",
+        selectable: 1,
+        columns: [
+            { title: "Method", field: "method", width: 100 },
+            { title: "URL", field: "url" },
+            {
+                title: "Status",
+                field: "status",
+                width: 100,
+                formatter: function (cell) {
+                    const status = cell.getValue();
+                    const color = status >= 500 ? 'red' : status >= 400 ? 'orange' : 'green';
+                    return `<span style="color: ${color}; font-weight: bold;">${status}</span>`;
+                }
+            },
+            { title: "Duration (ms)", field: "duration", width: 150, formatter: (cell) => printDuration(cell.getValue()) },
+            {
+                title: "Time",
+                field: "timestamp",
+                width: 200,
+                formatter: function (cell) {
+                    return new Date(cell.getValue()).toLocaleString();
+                }
+            },
+            {
+                title: "",
+                width: 80,
+                formatter: function (cell) {
+                    const el = document.createElement("div");
+                    el.onclick = () => showRequestDetails(cell.getData());
+                    el.innerHTML = "View";
+                    return el;
+                }
+            }
+        ],
+        data: []
+    });
+
+    // Auto-fetch on load if tab is active (or just fetch initially)
+    fetchRequests();
+});
+
+function fetchRequests() {
+    const headers = typeof getRequestHeaders !== 'undefined' ? getRequestHeaders() : {};
+
+    // Determine base path for API requests  
+    const basePath = window.location.pathname.endsWith('/') ? window.location.pathname.slice(0, -1) : window.location.pathname;
+    const url = basePath + '/';
+
+    fetch(url + 'requests', { headers })
+        .then(res => res.json())
+        .then(data => {
+            if (requestsTable) {
+                requestsTable.setData(data.requests);
+            }
+        })
+        .catch(err => console.error("Failed to fetch requests", err));
+}
+
+function showRequestDetails(request) {
+    const container = document.getElementById('request-details-container');
+    const content = document.getElementById('request-details-content');
+    const traceContainer = document.getElementById('middleware-trace-container');
+
+    container.style.display = 'block';
+
+    // Render Summary
+    content.innerHTML = `
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
+            <div><strong>Method:</strong> ${request.method}</div>
+            <div><strong>URL:</strong> ${request.url}</div>
+            <div><strong>Status:</strong> ${request.status}</div>
+            <div><strong>Duration:</strong> ${printDuration(request.duration)} ms</div>
+            <div><strong>Timestamp:</strong> ${new Date(request.timestamp).toLocaleString()}</div>
+        </div>
+    `;
+
+    // Render Trace
+    if (request.handlerStack && request.handlerStack.length > 0) {
+        let html = '<div style="display: flex; flex-direction: column; gap: 4px;">';
+
+        request.handlerStack.forEach((item, index) => {
+            const duration = item.duration || 0;
+
+            if (index !== 0) {
+                html += `<div style="align-self: center">⬇︎</div>`;
+            }
+
+            html += `
+                <div style="padding: 8px; border-radius: 4px; background: var(--bg-secondary);">
+                    <div style="display: flex; justify-content: space-between;">
+                        <span style="font-weight: bold;">${item.name}</span>
+                        <span>${printDuration(duration)}</span>
+                    </div>
+                    <div style="font-size: 0.8rem; color: var(--text-secondary);">
+                        ${item.file}:${item.line}
+                    </div>
+                    ${item.stateChanges ? `<div style="font-size: 0.8rem; margin-top: 4px; color: #aaa;">State Changes: ${Object.keys(item.stateChanges).join(', ')}</div>` : ''}
+                </div>
+            `;
+        });
+
+        html += '</div>';
+        traceContainer.innerHTML = html;
+    } else {
+        traceContainer.innerHTML = '<div style="color: var(--text-secondary);">No middleware trace available.</div>';
+    }
+
+    // Scroll to details
+    container.scrollIntoView({ behavior: 'smooth' });
+}

package/dist/plugins/application/dashboard/static/scrollbar.css

@@ -0,0 +1,24 @@
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: #22355a;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #2a406a;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+*:hover::-webkit-scrollbar-thumb {
+    background-color: #22468a;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #0b0f17;
+}
+
+::-webkit-scrollbar-corner {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}