shokupan 0.10.4 → 0.11.0

package/dist/plugins/application/api-explorer/static/explorer-client.mjs

@@ -40,6 +40,16 @@ function handleHashNavigation() {
         return;
     }
 
+    // Check if it's a middleware view
+    if (hash.startsWith('middleware-')) {
+        const middlewareId = hash.replace('middleware-', '');
+        const middleware = explorerData.middlewareRegistry?.[middlewareId];
+        if (middleware) {
+            renderMiddlewareView(middleware, container);
+            return;
+        }
+    }
+
     // Find route
     const route = explorerData.routes.find(r => r.op.operationId === hash);
     if (route) {
@@ -60,19 +70,202 @@ function renderInfoSection(info) {
     `;
 }
 
+function renderMiddlewareView(middleware, container) {
+    const html = `
+        <div class="middleware-detail-view">
+            <div class="middleware-header">
+                <h1>${middleware.name}</h1>
+                <div class="middleware-meta">
+                    ${middleware.scope ? `<span class="badge">${middleware.scope}</span>` : ''}
+                    ${middleware.file ? `
+                        <a href="vscode://file/${middleware.file}:${middleware.startLine || 1}" class="doc-source-link">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="16 18 22 12 16 6"></polyline>
+                                <polyline points="8 6 2 12 8 18"></polyline>
+                            </svg>
+                            ${middleware.file.split('/').pop()}:${middleware.startLine || 1}
+                        </a>
+                    ` : ''}
+                </div>
+            </div>
+
+            ${middleware.responseTypes || middleware.headers ? `
+                <div class="middleware-capabilities">
+                    ${middleware.responseTypes ? `
+                        <div class="capability-section">
+                            <h3>Response Types</h3>
+                            <div class="response-list">
+                                ${Object.entries(middleware.responseTypes).map(([code, resp]) => `
+                                    <div class="response-item">
+                                        <code class="status-code">${code}</code>
+                                        <span>${resp.description || 'Response'}</span>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                    ` : ''}
+                    ${middleware.headers && middleware.headers.length > 0 ? `
+                        <div class="capability-section">
+                            <h3>Headers</h3>
+                            <div class="header-list">
+                                ${middleware.headers.map(h => `<code class="header-name">${h}</code>`).join('')}
+                            </div>
+                        </div>
+                    ` : ''}
+                </div>
+            ` : ''}
+
+            ${middleware.file ? `
+                <div class="source-section">
+                    <h3>Source Code</h3>
+                    <div id="monaco-middleware-source" class="monaco-container" style="height: 400px;"></div>
+                </div>
+            ` : ''}
+
+            ${middleware.usedBy && middleware.usedBy.length > 0 ? `
+                <div class="usage-section">
+                    <h3>Used By (${middleware.usedBy.length} routes)</h3>
+                    <div class="table-container">
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>Method</th>
+                                    <th>Path</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                ${middleware.usedBy.map(routePath => {
+        const route = explorerData.routes.find(r => r.path === routePath);
+        if (route) {
+            return `
+                                            <tr>
+                                                <td class="col-method"><span class="badge badge-${route.method.toUpperCase()}">${route.method.toUpperCase()}</span></td>
+                                                <td class="col-path"><a href="#${route.op.operationId}" class="route-link">${routePath}</a></td>
+                                                <td class="col-desc">${route.op.summary || route.op.description || '-'}</td>
+                                            </tr>
+                                        `;
+        }
+        return `
+                                        <tr>
+                                            <td colspan="3">${routePath} (Route definition not found)</td>
+                                        </tr>
+                                    `;
+    }).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            ` : ''}
+        </div>
+    `;
+
+    container.innerHTML = html;
+
+    // Initialize Monaco for source code
+    if (middleware.file && typeof require !== 'undefined') {
+        require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
+        require(['vs/editor/editor.main'], function () {
+            const monacoContainer = document.getElementById('monaco-middleware-source');
+            if (monacoContainer) {
+                if (currentEditors.source) currentEditors.source.dispose();
+
+                currentEditors.source = monaco.editor.create(monacoContainer, {
+                    value: '//  Loading source...',
+                    language: 'typescript',
+                    theme: 'vs-dark',
+                    minimap: { enabled: false },
+                    lineNumbers: 'on',
+                    readOnly: true,
+                    scrollBeyondLastLine: false,
+                    automaticLayout: true,
+                    glyphMargin: false,
+                    folding: false,
+                    lineNumbersMinChars: 3,
+                    fontSize: 13,
+                    fontFamily: 'JetBrains Mono',
+                    renderLineHighlight: 'none'
+                });
+
+                // Load source
+                fetch(`_source?file=${encodeURIComponent(middleware.file)}`)
+                    .then(res => {
+                        if (!res.ok) throw new Error(res.statusText);
+                        return res.text();
+                    })
+                    .then(text => {
+                        if (currentEditors.source) {
+                            currentEditors.source.setValue(text);
+
+                            // Highlight the middleware function
+                            if (middleware.startLine) {
+                                const endLine = middleware.endLine || middleware.startLine;
+                                const decorations = [{
+                                    range: new monaco.Range(middleware.startLine, 1, endLine, 1),
+                                    options: {
+                                        isWholeLine: true,
+                                        className: 'closure-highlight'
+                                    }
+                                }];
+                                currentEditors.source.deltaDecorations([], decorations);
+                                currentEditors.source.revealLineInCenter(middleware.startLine);
+                            }
+                        }
+                    })
+                    .catch(err => {
+                        if (currentEditors.source) {
+                            currentEditors.source.setValue(`// Failed to load source: ${err.message}`);
+                        }
+                    });
+            }
+        });
+    }
+}
+
 // Helper to recursively render schema properties
-function renderSchema(schema, depth = 0) {
+function renderSchema(schema, depth = 0, isResponse = false) {
     if (!schema) return '';
 
     const indent = depth * 16;
     const type = schema.type || 'any';
     const required = schema.required || [];
 
+    // Handle oneOf (multiple possible schemas)
+    if (schema.oneOf) {
+        return `
+            <div style="margin-left: ${indent}px;">
+                <div style="font-weight: 500; color: var(--text-primary); margin-bottom: 8px;">
+                    <span style="color: var(--text-secondary); font-size: 0.85rem;">One of the following:</span>
+                </div>
+                ${schema.oneOf.map((subSchema, idx) => `
+                    <div style="border-left: 3px solid #4caf50; padding-left: 12px; margin-bottom: 12px;">
+                        <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px;">Option ${idx + 1}:</div>
+                        ${renderSchema(subSchema, 0, isResponse)}
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
     if (type === 'object' && schema.properties) {
         const props = Object.entries(schema.properties).map(([key, prop]) => {
             const isRequired = required.includes(key);
-            const propType = prop.type || 'any';
-            const hasNested = (propType === 'object' && prop.properties) || (propType === 'array' && prop.items);
+            const isUnknown = prop['x-unknown'] === true;
+            const propType = isUnknown ? 'unknown' : (prop.type || 'any');
+            const hasNested = (prop.type === 'object' && prop.properties) || (prop.type === 'array' && prop.items);
+
+            // For responses, show "optional" for non-required fields
+            // For requests, show "required" for required fields
+            let badgeHtml = '';
+            if (isResponse) {
+                if (!isRequired) {
+                    badgeHtml = '<div class="property-optional" style="margin-left: auto; font-size: 0.75rem; color: #9e9e9e; text-transform: uppercase; font-style: italic;">optional</div>';
+                }
+            } else {
+                if (isRequired) {
+                    badgeHtml = '<div class="property-required" style="margin-left: auto; font-size: 0.75rem; color: #f44336; text-transform: uppercase;">required</div>';
+                }
+            }
 
             return `
                 <div style="margin-left: ${indent}px;">
@@ -80,11 +273,12 @@ function renderSchema(schema, depth = 0) {
                         <div class="property-name" style="font-family: monospace; font-weight: 500; color: var(--text-primary);">${key}</div>
                         <span class="property-detail" style="color: var(--text-secondary); font-size: 0.85rem;">
                             <span class="property-detail-value">${propType}</span>
+                            ${isUnknown ? '<span class="unknown-marker" title="Type could not be determined statically" style="color: #ff9800; margin-left: 4px;">⚠️</span>' : ''}
                         </span>
-                        ${isRequired ? '<div class="property-required" style="margin-left: auto; font-size: 0.75rem; color: #f44336; text-transform: uppercase;">required</div>' : ''}
+                        ${badgeHtml}
                     </div>
                     ${prop.description ? `<div style="color: var(--text-secondary); font-size: 0.85rem; margin-left: 0; margin-top: -4px; margin-bottom: 4px;">${prop.description}</div>` : ''}
-                    ${hasNested ? renderSchema(propType === 'array' ? prop.items : prop, depth + 1) : ''}
+                    ${hasNested ? renderSchema(propType === 'array' ? prop.items : prop, depth + 1, isResponse) : ''}
                 </div>
             `;
         }).join('');
@@ -95,12 +289,18 @@ function renderSchema(schema, depth = 0) {
                 <div style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
                     [array items]
                 </div>
-                ${renderSchema(schema.items, depth + 1)}
+                ${renderSchema(schema.items, depth + 1, isResponse)}
             </div>
         `;
     }
 
-    return '';
+    return `
+        <div style="margin-left: ${indent}px; padding: 4px 0;">
+            <span class="property-detail-value" style="color: var(--text-secondary); font-family: monospace;">${type}</span>
+            ${schema.format ? `<span style="color: var(--text-secondary); font-size: 0.85rem; margin-left: 6px;">(${schema.format})</span>` : ''}
+            ${schema.description ? `<div style="color: var(--text-secondary); font-size: 0.85rem; margin-top: 4px;">${schema.description}</div>` : ''}
+        </div>
+    `;
 }
 
 // Helper to highlight path operators
@@ -168,11 +368,38 @@ function renderRequestView(route, container) {
                             <div class="info-header">
                                 <h2 class="info-title">${summary}</h2>
                                 <div class="info-meta">
+                                    ${op['x-shokupan-builtin'] ? `
+                                        <div class="meta-row">
+                                            <span class="builtin-badge" title="This endpoint is provided by a built-in plugin">
+                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+                                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                                                </svg>
+                                                Built-in Plugin ${op['x-shokupan-plugin-name'] ? `(${op['x-shokupan-plugin-name']})` : ''}
+                                            </span>
+                                        </div>
+                                    ` : ''}
                                     ${op.tags ? `<div class="meta-row"><strong>Tags:</strong> ${op.tags.map(t => `<span class="badge">${t}</span>`).join('')}</div>` : ''}
                                 </div>
                             </div>
                             
                             ${op.description ? `<div class="markdown-content" style="margin:16px 0;">${parseMarkdown(op.description)}</div>` : ''}
+
+                            ${op['x-source-info']?.isRuntime ? `
+                            <div class="alert alert-warning" style="margin: 16px 0; padding: 12px; background: rgba(255, 152, 0, 0.1); border-left: 3px solid #ff9800; border-radius: 4px;">
+                                <strong style="color: #ff9800;">⚠️ Warning:</strong> This route's path could not be statically determined.
+                                <div style="margin-top: 4px; font-size: 0.9em; opacity: 0.8;">
+                                    The path depends on runtime variables (e.g., process.env). Static analysis features like type inference may be limited.
+                                </div>
+                            </div>
+                            ` : ''}
+
+                            ${op['x-warning'] ? `
+                            <div class="alert alert-warning" style="margin: 16px 0; padding: 12px; background: rgba(255, 152, 0, 0.1); border-left: 3px solid #ff9800; border-radius: 4px;">
+                                <strong style="color: #ff9800;">⚠️ Warning:</strong> ${op['x-warning-reason'] || 'This operation could not be fully analyzed statically'}
+                            </div>
+                            ` : ''}
                             
                             ${op.tags && op.tags.length > 0 ? `
                             <div class="hierarchy-section" style="margin:16px 0;">
@@ -259,7 +486,7 @@ function renderRequestView(route, container) {
                                             ` : ''}
                                             ${schema ? `
                                                 <div style="margin-top: 8px; background: var(--bg-primary); padding: 8px; border-radius: 4px;">
-                                                    ${renderSchema(schema)}
+                                                    ${renderSchema(schema, 0, true)}
                                                 </div>
                                             ` : ''}
                                         </div>
@@ -272,13 +499,18 @@ function renderRequestView(route, container) {
                             ${source ? `
                             <div class="source-section">
                                 <h3 style="margin-bottom:8px; font-size:1.1rem; color:var(--text-primary);">Source Code</h3>
-                                <div class="source-header" style="justify-content: flex-start; margin-bottom: 8px;">
+                                <div class="source-header" style="justify-content: space-between; margin-bottom: 8px; align-items: center;">
                                     <a href="vscode://file/${source.file}:${source.line}" class="doc-source-link" title="${source.file}:${source.line}">
                                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px">
                                             <polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline>
                                         </svg>
                                         ${source.file.split('/').pop()}:${source.line}
                                     </a>
+                                    <button class="btn icon-btn" id="btn-source-fullscreen" title="Toggle Fullscreen">
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
+                                        </svg>
+                                    </button>
                                 </div>
                                 <div id="monaco-source-viewer" class="monaco-container"></div>
                             </div>
@@ -421,6 +653,48 @@ function renderRequestView(route, container) {
     // Setup initial remove buttons
     container.querySelectorAll('.remove-header').forEach(setupRemoveHeaderBtn);
 
+    // Source viewer fullscreen toggle
+    const fullscreenBtn = document.getElementById('btn-source-fullscreen');
+    if (fullscreenBtn) {
+        const updateFullscreenIcon = (isFullscreen) => {
+            const svg = fullscreenBtn.querySelector('svg');
+            if (isFullscreen) {
+                // Exit fullscreen icon (minimize)
+                svg.innerHTML = '<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>';
+            } else {
+                // Enter fullscreen icon (maximize)
+                svg.innerHTML = '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>';
+            }
+        };
+
+        fullscreenBtn.addEventListener('click', () => {
+            const sourceSection = container.querySelector('.source-section');
+            if (sourceSection) {
+                const isFullscreen = sourceSection.classList.toggle('fullscreen');
+                updateFullscreenIcon(isFullscreen);
+
+                // Update Monaco layout after transition
+                setTimeout(() => {
+                    if (currentEditors.source) currentEditors.source.layout();
+                }, 300);
+            }
+        });
+
+        // ESC key to exit fullscreen
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                const sourceSection = container.querySelector('.source-section');
+                if (sourceSection && sourceSection.classList.contains('fullscreen')) {
+                    sourceSection.classList.remove('fullscreen');
+                    updateFullscreenIcon(false);
+                    setTimeout(() => {
+                        if (currentEditors.source) currentEditors.source.layout();
+                    }, 300);
+                }
+            }
+        });
+    }
+
     // Populate Request Body if example exists
     if (hasBody && currentEditors.request) {
         currentEditors.request.setValue('{\n  \n}');
@@ -429,6 +703,132 @@ function renderRequestView(route, container) {
     setupPanelResizer(container);
 }
 
+const STORAGE_PREFIX = 'shokupan:explorer:';
+
+function saveState(key, value) {
+    try {
+        localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(value));
+    } catch (e) {
+        console.warn('Failed to save state', e);
+    }
+}
+
+function getState(key, defaultValue) {
+    try {
+        const item = localStorage.getItem(STORAGE_PREFIX + key);
+        return item ? JSON.parse(item) : defaultValue;
+    } catch (e) {
+        return defaultValue;
+    }
+}
+
+function setupSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    const content = document.querySelector('.content');
+    if (!sidebar) return;
+
+    // Restore state
+    const savedWidth = getState('sidebar_width', 300);
+    const isCollapsed = getState('sidebar_collapsed', false);
+
+    if (savedWidth) sidebar.style.width = `${savedWidth}px`;
+    if (isCollapsed) {
+        sidebar.classList.add('collapsed');
+        content.classList.add('no-sidebar');
+    }
+
+    // 1. Toggle Sidebar Logic
+    const toggleBtn = document.querySelector('.toggle-sidebar');
+    const expandBtn = document.querySelector('.sidebar-collapse-trigger');
+
+    const toggleSidebar = (collapse) => {
+        if (collapse) {
+            sidebar.classList.add('collapsed');
+            content.classList.add('no-sidebar');
+            saveState('sidebar_collapsed', true);
+        } else {
+            sidebar.classList.remove('collapsed');
+            content.classList.remove('no-sidebar');
+            saveState('sidebar_collapsed', false);
+        }
+        // Trigger resize for editors
+        setTimeout(() => {
+            Object.values(currentEditors).forEach(editor => editor && editor.layout());
+        }, 300);
+    };
+
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', () => toggleSidebar(true));
+    }
+
+    if (expandBtn) {
+        expandBtn.addEventListener('click', () => toggleSidebar(false));
+    }
+
+    // 2. Resize Logic
+    setupSidebarResizer(sidebar);
+
+    // 3. Collapsible Groups (top-level)
+    document.querySelectorAll('.nav-group-title').forEach(title => {
+        title.addEventListener('click', (e) => {
+            const group = e.currentTarget.parentElement;
+            group.classList.toggle('collapsed');
+        });
+    });
+
+    // 4. Collapsible Subgroups (nested)
+    document.querySelectorAll('.nav-subgroup-title').forEach(title => {
+        title.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent bubbling to parent group
+            const subgroup = e.currentTarget.parentElement;
+            subgroup.classList.toggle('collapsed');
+        });
+    });
+}
+
+function setupSidebarResizer(sidebar) {
+    const resizer = sidebar.querySelector('.resize-handle');
+    if (!resizer) return;
+
+    let isResizing = false;
+    let startX, startWidth;
+
+    resizer.addEventListener('mousedown', (e) => {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = sidebar.getBoundingClientRect().width;
+
+        sidebar.classList.add('resizing'); // Disable transition
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (!isResizing) return;
+
+        const newWidth = startWidth + (e.clientX - startX);
+        // Clean constraints: min 150px, max 800px
+        const clamped = Math.max(150, Math.min(800, newWidth));
+
+        sidebar.style.width = `${clamped}px`;
+    });
+
+    document.addEventListener('mouseup', () => {
+        if (isResizing) {
+            isResizing = false;
+            sidebar.classList.remove('resizing');
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+
+            saveState('sidebar_width', sidebar.getBoundingClientRect().width);
+
+            // Layout editors
+            Object.values(currentEditors).forEach(editor => editor && editor.layout());
+        }
+    });
+}
+
 function setupPanelResizer(container) {
     const resizer = container.querySelector('.panel-resizer');
     const topPanel = container.querySelector('.request-panel');
@@ -436,6 +836,10 @@ function setupPanelResizer(container) {
 
     if (!resizer || !topPanel || !bottomPanel) return;
 
+    // Restore state
+    const savedSplit = getState('panel_split', 50); // Default 50%
+    topPanel.style.flex = `0 0 ${savedSplit}%`;
+
     let isResizing = false;
 
     resizer.addEventListener('mousedown', (e) => {
@@ -470,6 +874,13 @@ function setupPanelResizer(container) {
             document.body.style.cursor = '';
             document.body.style.userSelect = '';
 
+            // Save state
+            const currentFlex = topPanel.style.flex;
+            const match = currentFlex.match(/([\d.]+)%/);
+            if (match) {
+                saveState('panel_split', parseFloat(match[1]));
+            }
+
             // Trigger monaco layout as size changed
             if (currentEditors.request) currentEditors.request.layout();
             if (currentEditors.response) currentEditors.response.layout();
@@ -562,11 +973,12 @@ function initMonaco() {
                             const endLine = highlights[1] || startLine;
 
                             if (startLine > 0) {
+                                const highlightClass = sourceInfo.isRuntime ? 'closure-highlight-dynamic' : 'closure-highlight';
                                 decorations.push({
                                     range: new monaco.Range(startLine, 1, endLine, 1),
                                     options: {
                                         isWholeLine: true,
-                                        className: 'closure-highlight'
+                                        className: highlightClass
                                     }
                                 });
                                 currentEditors.source.revealLineInCenter(startLine);
@@ -581,6 +993,7 @@ function initMonaco() {
                                     if (h.type === 'emit') className = 'emit-highlight';
                                     else if (h.type === 'return-success') className = 'success-line-highlight';
                                     else if (h.type === 'return-warning') className = 'warning-line-highlight';
+                                    else if (h.type === 'dynamic-path') className = 'closure-highlight-dynamic';
                                     // Fallback for older 'return' type if any mixed
                                     else if (h.type === 'return') className = 'warning-line-highlight';
 
@@ -857,24 +1270,4 @@ function parseMarkdown(text) {
     return marked.parse(text, { renderer });
 }
 
-function setupSidebar() {
-    const sidebar = document.querySelector('.sidebar');
-    if (!sidebar) return;
-
-    // Collapsible Groups (top-level)
-    document.querySelectorAll('.nav-group-title').forEach(title => {
-        title.addEventListener('click', (e) => {
-            const group = e.currentTarget.parentElement;
-            group.classList.toggle('collapsed');
-        });
-    });
 
-    // Collapsible Subgroups (nested)
-    document.querySelectorAll('.nav-subgroup-title').forEach(title => {
-        title.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent bubbling to parent group
-            const subgroup = e.currentTarget.parentElement;
-            subgroup.classList.toggle('collapsed');
-        });
-    });
-}