shokupan 0.10.5 → 0.11.0

package/dist/plugins/application/dashboard/static/graph.mjs

@@ -18,6 +18,10 @@ function renderPath(path) {
 
     let out = '';
     parts.forEach((part, index) => {
+        if (part === '.well-known') {
+            out += `/<span class="path-segment" style="color: #8b5cf6; font-weight: bold;">${part}</span>`;
+            return;
+        }
         if (part.startsWith(":")) {
             out += `/<span class="path-segment path-param">${part}</span>`;
             return;
@@ -35,8 +39,44 @@ function renderPath(path) {
 const GroupNode = ({ data }) => {
     return React.createElement('div', { style: { padding: '10px', height: '100%' } },
         React.createElement('div', { style: { fontWeight: 'bold', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px', marginBottom: '5px' } },
-            data.type === "controller" ? data.label : "Router: " + data.label
+            data.type === "controller" ? data.label : (data.data.metadata?.pluginName ? data.label : "Router: " + data.label)
+        ),
+        /* Middleware Rendering */
+        (data.data?.children?.middleware || [])?.map((mw, i) =>
+            React.createElement('div', {
+                key: 'mw-' + i, style: {
+                    background: '#7e22ce20', color: '#fff', padding: '2px 6px', borderRadius: '4px', fontSize: '10px', margin: '2px 0 4px 0', border: '1px solid #6b21a8',
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between'
+                }
+            },
+                React.createElement('span', { style: { fontWeight: 'bold' } }, "MW"),
+                React.createElement('span', { style: { font: 'var(--shokupan-font-mono)' } }, mw.name || "Middleware")
+            )
+        ),
+
+
+        /* Event Rendering */
+        (data.data?.children?.events || [])?.map((ev, i) =>
+            React.createElement('div', { key: 'ev-' + i, style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', margin: '2px 0' } },
+                React.createElement('span', {
+                    style: {
+                        padding: '2px 6px',
+                        borderRadius: '4px',
+                        background: '#60a5fa20',
+                        border: '1px solid #60a5fa',
+                        color: 'white',
+                        fontWeight: 'bold',
+                        fontSize: '10px',
+                        minWidth: '40px',
+                        textAlign: 'center'
+                    }
+                }, "WS"),
+                React.createElement('span', {
+                    style: { font: 'var(--shokupan-font-mono)', color: '#cbd5e1' }
+                }, ev.name)
+            )
         ),
+
         data.data?.children?.routes?.map((r, i) =>
             React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', margin: '2px 0' } },
                 React.createElement('span', {
@@ -60,7 +100,7 @@ const GroupNode = ({ data }) => {
                     }
                 }, r.method),
                 React.createElement('span', {
-                    style: { fontFamily: 'monospace', color: r.isFailed ? '#ef4444' : '#cbd5e1', fontWeight: r.isFailed ? 'bold' : 'normal' },
+                    style: { font: 'var(--shokupan-font-mono)', color: r.isFailed ? '#ef4444' : '#cbd5e1', fontWeight: r.isFailed ? 'bold' : 'normal' },
                     dangerouslySetInnerHTML: { __html: renderPath(r.path) }
                 })
             )
@@ -208,9 +248,59 @@ const GraphComponent = () => {
                 // Label logic matches GroupNode
                 header.textContent = container.type === "controller"
                     ? (container.name + (container.metadata?.pluginName ? `\n[${container.metadata.pluginName}]` : ''))
-                    : "Router: " + container.path;
+                    : (container.metadata?.pluginName ? `[${container.metadata.pluginName}]` : "Router: " + container.path);
                 nodeEl.appendChild(header);
 
+                // Mimic Middleware
+                const middleware = container.children?.middleware || [];
+                for (const mw of middleware) {
+                    const mwEl = document.createElement("div");
+                    mwEl.style.display = "flex";
+                    mwEl.style.alignItems = "center";
+                    mwEl.style.justifyContent = "space-between";
+                    mwEl.style.padding = "2px 6px";
+                    mwEl.style.fontSize = "10px";
+                    mwEl.style.margin = "2px 0 4px 0";
+                    mwEl.style.border = "1px solid transparent"; // Match border in component
+
+                    const label = document.createElement("span");
+                    label.textContent = "MW";
+                    label.style.fontWeight = "bold";
+                    mwEl.appendChild(label);
+
+                    const val = document.createElement("span");
+                    val.textContent = mw.name || "Middleware";
+                    val.style.font = "var(--shokupan-font-mono)";
+                    mwEl.appendChild(val);
+
+                    nodeEl.appendChild(mwEl);
+                    nodeEl.appendChild(mwEl);
+                }
+
+                // Mimic Events
+                const events = container.children?.events || [];
+                for (const ev of events) {
+                    const row = document.createElement("div");
+                    row.style.display = "flex";
+                    row.style.alignItems = "center";
+                    row.style.gap = "8px";
+                    row.style.margin = "2px 0";
+
+                    const badge = document.createElement("span");
+                    badge.textContent = "WS";
+                    badge.style.padding = "2px 6px";
+                    badge.style.fontSize = "10px";
+                    badge.style.fontWeight = "bold";
+                    row.appendChild(badge);
+
+                    const name = document.createElement("span");
+                    name.textContent = ev.name;
+                    name.style.font = "var(--shokupan-font-mono)";
+                    row.appendChild(name);
+
+                    nodeEl.appendChild(row);
+                }
+
                 // Mimic Routes
                 for (const route of routes) {
                     const row = document.createElement("div");
@@ -228,7 +318,7 @@ const GraphComponent = () => {
 
                     const path = document.createElement("span");
                     path.textContent = route.path;
-                    path.style.fontFamily = "monospace";
+                    path.style.font = "var(--shokupan-font-mono)";
                     // path.style.color... doesn't affect size
                     row.appendChild(path);
 
@@ -250,34 +340,36 @@ const GraphComponent = () => {
 
                 const elkEdges = [];
                 const elkNodes = [
-                    ...(middleware || []).map((mw, idx) => {
-                        const id = makeId("middleware", parentId, idx, mw.name);
-                        return {
-                            id,
-                            label: mw.metadata?.pluginName || mw.name || "Unknown Middleware",
-                            ...calculateNodeBounds(mw),
-                            // width: 140,
-                            // height: 40,
-                            type: "middleware",
-                            style: getNodeStyle(id),
-                            data: mw
-                        };
-                    }),
+                    // Middleware nodes removed
                     ...(routers || []).map((r, idx) => {
                         const id = makeId("router", parentId, idx, r.path);
                         const { nodes, edges } = addRecursedLevel(r.children, id);
                         restChildrenNodes.push(...nodes);
                         restChildrenEdges.push(...edges);
 
+                        const isPlugin = r.metadata?.pluginName;
+                        const label = isPlugin
+                            ? `[${r.metadata.pluginName}]`
+                            : r.path;
+
+                        const baseStyle = getNodeStyle(id);
+                        const routerStyle = isPlugin
+                            ? {
+                                ...baseStyle,
+                                background: '#f59e0b10',
+                                color: '#f59e0b',
+                                border: '1px solid #f59e0b'
+                            }
+                            : {
+                                ...baseStyle
+                            };
+
                         return {
                             id,
-                            label: r.path,
+                            label: label,
                             ...calculateNodeBounds(r),
                             type: "router",
-                            style: {
-                                ...getNodeStyle(id),
-                                backgroundColor: 'red'
-                            },
+                            style: routerStyle,
                             data: r
                         };
                     }),
@@ -305,33 +397,12 @@ const GraphComponent = () => {
                     };
                 });
 
-                let lastMiddlewareId = "";
-                // Create middleware edges
-                middleware?.forEach((mw, idx) => {
-                    const id = makeId("middleware", parentId, idx, mw.name);
-
-                    let sourceId = idx === 0 ?
-                        parentId ? parentId : "entrypoint-http"
-                        : makeId("middleware", parentId, idx - 1, middleware[idx - 1].name);
-
-                    elkEdges.push({
-                        id,
-                        sources: [sourceId],
-                        targets: [id],
-                        type: "straight",
-                        style: {
-                            ...getEdgeStyle(mw),
-                            backgroundColor: 'blue'
-                        }
-                    });
-                    lastMiddlewareId = id;
-                });
-
+                // Simplified Edge Creation - Direct connections
                 routers?.forEach((r, idx) => {
                     const id = makeId("router", parentId, idx, r.path);
                     elkEdges.push({
-                        id,
-                        sources: [lastMiddlewareId || parentId],
+                        id: `edge_${parentId}_${id}`,
+                        sources: [parentId],
                         targets: [id],
                         style: {
                             ...getEdgeStyle(r),
@@ -341,10 +412,9 @@ const GraphComponent = () => {
                 });
                 controllers?.forEach((ctrl, idx) => {
                     const id = makeId("controller", parentId, idx, ctrl.path);
-                    console.log({ id, lastMiddlewareId });
                     elkEdges.push({
-                        id,
-                        sources: [lastMiddlewareId || parentId],
+                        id: `edge_${parentId}_${id}`,
+                        sources: [parentId],
                         targets: [id],
                         style: {
                             ...getEdgeStyle(ctrl),
@@ -359,10 +429,48 @@ const GraphComponent = () => {
                 return { nodes, edges };
             }
 
-            const { nodes: elkNodes, edges: elkEdges } = addRecursedLevel(registryData);
-            elkNodes.push({
-                id: "entrypoint-http", width: 64, height: 64, type: "entrypoint"
-            });
+            const rootNodeId = "router_root";
+            const rootNodeData = {
+                type: 'router',
+                metadata: { name: 'Root Application' },
+                path: '/',
+                children: {
+                    routes: registryData.routes,
+                    middleware: registryData.middleware,
+                    events: registryData.events
+                }
+            };
+
+            // Pass rootNodeId as parent to children
+            const { nodes: childrenNodes, edges: childrenEdges } = addRecursedLevel(registryData, rootNodeId);
+
+            // Create explicit Root Node
+            const rootNode = {
+                id: rootNodeId,
+                label: "Root Application",
+                ...calculateNodeBounds(rootNodeData),
+                type: "router",
+                style: getNodeStyle(rootNodeId),
+                data: rootNodeData
+            };
+
+            // Combine all nodes
+            const elkNodes = [
+                rootNode,
+                ...childrenNodes,
+                { id: "entrypoint-http", width: 64, height: 64, type: "entrypoint" }
+            ];
+
+            // Connect Entrypoint -> Root
+            const entrypointEdge = {
+                id: 'edge_entrypoint_root',
+                sources: ['entrypoint-http'],
+                targets: [rootNodeId],
+                type: "straight",
+                style: { stroke: '#3b82f6' }
+            };
+
+            const elkEdges = [entrypointEdge, ...childrenEdges];
 
             const nodeNodeGap = '20';
             const nodeEdgeGap = '20';
@@ -378,6 +486,7 @@ const GraphComponent = () => {
                     'elk.layered.spacing.edgeNodeBetweenLayers': nodeEdgeGap,
                     'elk.layered.wrapping.additionalEdgeSpacing': nodeEdgeGap,
                     'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+                    'elk.layered.nodePlacement.bk.fixedAlignment': 'LEFTUP',
                 },
                 children: elkNodes,
                 edges: elkEdges
@@ -394,6 +503,7 @@ const GraphComponent = () => {
                 }
 
                 const style = NODE_STYLES[node.type] || {};
+                const customStyle = node.style || {};
                 const isGroup = node.children && node.children.length > 0;
 
                 flowNodes.push({
@@ -402,6 +512,7 @@ const GraphComponent = () => {
                     data: node,
                     style: {
                         ...style,
+                        ...customStyle,
                         width: node.width,
                         height: node.height,
                         zIndex: isGroup ? -1 : 1
@@ -450,10 +561,10 @@ const GraphComponent = () => {
             width: '100vw',
             height: '100vh',
             zIndex: 9999,
-            backgroundColor: '#1e293b' // Match theme
+            backgroundColor: 'var(--bg-primary)' // Match theme
         } : {
             width: '100%',
-            height: '600px', // Ensure explicit height if container doesn't provide it, though normally #cy does.
+            height: '100%',
             position: 'relative'
         }
     },
@@ -487,8 +598,8 @@ const GraphComponent = () => {
                         color: 'white',
                         padding: '6px 12px',
                         borderRadius: '6px',
+                        font: 'var(--shokupan-font-mono)',
                         fontSize: '12px',
-                        fontFamily: 'monospace',
                         border: '1px solid #475569'
                     }
                 }, `${Math.round(zoom * 100)}%`),

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

@@ -1,13 +1,3 @@
-.react-flow__controls-button {
-    color: #000 !important;
-    fill: #000 !important;
-    border-bottom: 1px solid #eee;
-}
-
-.react-flow__controls-button svg {
-    fill: currentColor;
-}
-
 .react-flow__node.react-flow__node-router {
     height: fit-content !important;
 }
@@ -15,4 +5,24 @@
 .react-flow__handle {
     opacity: 0;
     pointer-events: none;
+}
+
+.react-flow__attribution {
+    background-color: var(--palette-dark-secondary);
+    border-top-left-radius: 4px;
+}
+
+.react-flow__attribution a {
+    color: #000;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.react-flow__controls {
+    --xy-controls-button-background-color: var(--bg-primary);
+    --xy-controls-button-border-color-props: #202020;
+    --xy-controls-button-color: var(--text-primary);
+
+    --xy-controls-button-color-hover: var(--palette-dark-primary);
+    --xy-controls-button-background-color-hover: var(--bg-primary);
 }

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

@@ -1,18 +1,81 @@
 
 window.renderRegistry = function renderRegistry(node, container) {
-    const rootPath = "<%~ it.rootPath %>";
-    const linkPattern = "<%~ it.linkPattern %>";
+    const config = window.SHOKUPAN_CONFIG || {};
+    const rootPath = config.rootPath || "";
+    const linkPattern = config.linkPattern || "vscode://file/{{absolute}}:{{line}}";
 
     if (!node) {
         container.innerHTML = '<div style="color: var(--text-secondary)">No registry data available</div>';
         return;
     }
 
+    // 0. Pre-process paths for shortening
+    // Collect all paths
+    const allFilePaths = new Set();
+    const collectPaths = (n) => {
+        if (!n) return;
+        if (n.metadata && n.metadata.file) allFilePaths.add(n.metadata.file);
+        if (n.middleware) n.middleware.forEach(collectPaths);
+        if (n.routers) n.routers.forEach(collectPaths);
+        if (n.controllers) n.controllers.forEach(collectPaths);
+        if (n.routes) n.routes.forEach(collectPaths);
+        if (n.events) n.events.forEach(collectPaths);
+        if (n.children) collectPaths(n.children); // recursive for routers
+    };
+    collectPaths(node);
+
+    // Compute Shortest Unique Paths
+    const shortPathMap = {};
+    const pathsByFilename = {};
+
+    allFilePaths.forEach(p => {
+        const parts = p.split('/');
+        const filename = parts.pop();
+        if (!pathsByFilename[filename]) pathsByFilename[filename] = [];
+        pathsByFilename[filename].push({ full: p, parts: parts });
+    });
+
+    Object.keys(pathsByFilename).forEach(filename => {
+        const group = pathsByFilename[filename];
+        if (group.length === 1) {
+            shortPathMap[group[0].full] = filename;
+        } else {
+            // Collision handling
+            group.forEach(item => {
+                let suffix = filename;
+                let depth = 0;
+                // Add parent dirs until unique within this group
+                // Note: This is a simple approach. Strictly we need to check uniqueness against ALL other paths in group.
+                while (true) {
+                    if (depth >= item.parts.length) break; // Should not happen if they are different files
+
+                    // Check if current suffix is unique in group
+                    const conflicts = group.filter(g => {
+                        if (g.full === item.full) return false;
+                        // Construct suffix for g with same depth
+                        const gParts = g.full.split('/');
+                        const gSuffix = gParts.slice(gParts.length - 1 - depth).join('/');
+                        return gSuffix === suffix;
+                    });
+
+                    if (conflicts.length === 0) break;
+
+                    // prepend parent
+                    const parent = item.parts[item.parts.length - 1 - depth];
+                    suffix = parent + '/' + suffix;
+                    depth++;
+                }
+                shortPathMap[item.full] = suffix;
+            });
+        }
+    });
+
     const wrapper = document.createElement('div');
 
     // Helper to clean paths
     const cleanPath = (p) => {
         if (!p) return '';
+        if (shortPathMap[p]) return shortPathMap[p];
         if (p.startsWith(rootPath)) return p.slice(rootPath.length + 1);
         return p;
     };
@@ -42,7 +105,13 @@ window.renderRegistry = function renderRegistry(node, container) {
             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}`;
+            // Use relative (short) path for display
+            return `<a href="${link}" style="text-decoration: none; color: inherit;">
+                <span class="tree-meta" style="cursor: pointer; text-decoration: underline;">
+                ${relative}:${line}</span>
+                </a>
+                ${!metadata.pluginName ? displayNameStr : ''} ${builtin} ${pluginName}
+            `;
         }
         return '';
     };
@@ -53,9 +122,10 @@ window.renderRegistry = function renderRegistry(node, container) {
     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' }));
+    if (node.events) node.events.forEach(i => allItems.push({ ...i, kind: 'event' }));
 
     // 2. Sort by Order
-    const kindPriority = { 'middleware': 0, 'router': 1, 'controller': 2, 'route': 3 };
+    const kindPriority = { 'middleware': 0, 'router': 1, 'controller': 2, 'route': 3, 'event': 4 };
     allItems.sort((a, b) => {
         const pA = kindPriority[a.kind] !== undefined ? kindPriority[a.kind] : 99;
         const pB = kindPriority[b.kind] !== undefined ? kindPriority[b.kind] : 99;
@@ -101,9 +171,9 @@ window.renderRegistry = function renderRegistry(node, container) {
         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 style="display:flex; justify-content:space-between;"><span>Requests:</span> <span style="font: var(--shokupan-font-mono)">${m.requests}</span></div>
+                <div style="display:flex; justify-content:space-between;"><span>Traffic:</span> <span style="font: var(--shokupan-font-mono)">${percent}%</span></div>
+                <div style="display:flex; justify-content:space-between;"><span>Failures:</span> <span style="font: var(--shokupan-font-mono); color:${m.failures > 0 ? '#ef4444' : 'inherit'}">${m.failures} (${failRate}%)</span></div>
             </div>
         `;
     }
@@ -113,6 +183,10 @@ window.renderRegistry = function renderRegistry(node, container) {
 
         let out = '';
         parts.forEach((part, index) => {
+            if (part === '.well-known') {
+                out += `/<span class="path-segment" style="color: #8b5cf6; font-weight: bold;">${part}</span>`;
+                return;
+            }
             if (part.startsWith(":")) {
                 out += `/<span class="path-segment path-param">${part}</span>`;
                 return;
@@ -152,8 +226,18 @@ window.renderRegistry = function renderRegistry(node, container) {
             header.className = 'tree-item tooltip'; // Add tooltip class
             const meta = createFileMeta(item.metadata, 'Router');
             const tooltipHtml = getTooltipHtml(item.id);
+            const isPlugin = item.metadata && item.metadata.pluginName;
+            const badgeLabel = isPlugin ? 'PLUGIN' : 'ROUTER';
+            const badgeClass = isPlugin ? 'badge-PLUGIN' : 'badge-ROUTER';
+
+            // Add custom style for PLUGIN badge if needed, or rely on generic badge class + modifier
+            // For now, let's inject a style for badge-PLUGIN if it doesn't exist, or just inline it.
+            // Actually, let's just use inline style for the distinctive color if it's a plugin 
+            // to ensure it stands out without editing CSS file.
+            const badgeStyle = isPlugin ? 'background: #f59e0b; color: #000;' : '';
+
             header.innerHTML = `
-                <span class="badge badge-ROUTER">ROUTER</span>
+                <span class="badge ${badgeClass}" style="${badgeStyle}">${badgeLabel}</span>
                 <span class="tree-label">${renderPath(item.path)}</span>
                 ${meta}
                 ${tooltipHtml}
@@ -243,6 +327,26 @@ window.renderRegistry = function renderRegistry(node, container) {
             `;
             wrapper.appendChild(div);
         }
+
+        // Event
+        else if (item.kind === 'event') {
+            const div = document.createElement('div');
+            div.className = 'tree-item tooltip'; // Add tooltip class
+
+            // Event Badge style
+            const badgeStyle = "width: 50px; text-align: center; display: inline-block;";
+
+            const meta = createFileMeta(item.metadata, item.handlerName);
+            const tHtml = getTooltipHtml(item.id);
+
+            div.innerHTML = `
+                <span class="badge badge-SEND" style="${badgeStyle}">WS</span>
+                <span class="tree-label">${item.name}</span>
+                ${meta}
+                ${tHtml}
+            `;
+            wrapper.appendChild(div);
+        }
     });
     container.innerHTML = '';
     container.appendChild(wrapper);