276ed71f31
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
473 lines
14 KiB
JavaScript
473 lines
14 KiB
JavaScript
/**
|
|
* ds-network-monitor.js
|
|
* Network request monitoring and debugging
|
|
*
|
|
* REFACTORED: DSS-compliant version using DSBaseTool + table-template.js
|
|
* - Extends DSBaseTool for Shadow DOM, AbortController, and standardized lifecycle
|
|
* - Uses table-template.js for DSS-compliant table rendering (NO inline events/styles)
|
|
* - Event delegation pattern for all interactions
|
|
* - Logger utility instead of console.*
|
|
*
|
|
* Reference: .knowledge/dss-coding-standards.json
|
|
*/
|
|
|
|
import DSBaseTool from '../base/ds-base-tool.js';
|
|
import toolBridge from '../../services/tool-bridge.js';
|
|
import { ComponentHelpers } from '../../utils/component-helpers.js';
|
|
import { logger } from '../../utils/logger.js';
|
|
import { createTableView, setupTableEvents, createStatsCard } from '../../templates/table-template.js';
|
|
|
|
class DSNetworkMonitor extends DSBaseTool {
|
|
constructor() {
|
|
super();
|
|
this.requests = [];
|
|
this.filteredRequests = [];
|
|
this.filterUrl = '';
|
|
this.filterType = 'all';
|
|
this.autoRefresh = false;
|
|
this.refreshInterval = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.loadRequests();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.refreshInterval) {
|
|
clearInterval(this.refreshInterval);
|
|
}
|
|
super.disconnectedCallback();
|
|
}
|
|
|
|
/**
|
|
* Render the component (required by DSBaseTool)
|
|
*/
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.network-monitor-container {
|
|
padding: 16px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-controls {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-input {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-input-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.filter-input:focus {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
}
|
|
|
|
.filter-select {
|
|
width: 150px;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-input-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.auto-refresh-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--vscode-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.refresh-btn {
|
|
padding: 6px 12px;
|
|
font-size: 11px;
|
|
background: var(--vscode-button-background);
|
|
color: var(--vscode-button-foreground);
|
|
border: none;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.refresh-btn:hover {
|
|
background: var(--vscode-button-hoverBackground);
|
|
}
|
|
|
|
.content-wrapper {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
.loading-spinner {
|
|
font-size: 32px;
|
|
margin-bottom: 12px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Badge styles */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge-info {
|
|
background: rgba(75, 181, 211, 0.2);
|
|
color: #4bb5d3;
|
|
}
|
|
|
|
.badge-success {
|
|
background: rgba(137, 209, 133, 0.2);
|
|
color: #89d185;
|
|
}
|
|
|
|
.badge-warning {
|
|
background: rgba(206, 145, 120, 0.2);
|
|
color: #ce9178;
|
|
}
|
|
|
|
.badge-error {
|
|
background: rgba(244, 135, 113, 0.2);
|
|
color: #f48771;
|
|
}
|
|
|
|
.code {
|
|
font-family: 'Courier New', monospace;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.hint {
|
|
margin-top: 12px;
|
|
padding: 8px;
|
|
background-color: var(--vscode-sideBar-background);
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
.info-count {
|
|
margin-bottom: 12px;
|
|
padding: 12px;
|
|
background-color: var(--vscode-sideBar-background);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
</style>
|
|
|
|
<div class="network-monitor-container">
|
|
<!-- Filter Controls -->
|
|
<div class="filter-controls">
|
|
<input
|
|
type="text"
|
|
id="network-filter"
|
|
placeholder="Filter by URL or method..."
|
|
class="filter-input"
|
|
/>
|
|
<select id="network-type-filter" class="filter-select">
|
|
<option value="all">All Types</option>
|
|
</select>
|
|
<label class="auto-refresh-label">
|
|
<input type="checkbox" id="auto-refresh-toggle" />
|
|
Auto-refresh
|
|
</label>
|
|
<button
|
|
id="network-refresh-btn"
|
|
data-action="refresh"
|
|
class="refresh-btn"
|
|
type="button"
|
|
aria-label="Refresh network requests">
|
|
🔄 Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content-wrapper" id="network-content">
|
|
<div class="loading">
|
|
<div class="loading-spinner">⏳</div>
|
|
<div>Initializing...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Setup event listeners (required by DSBaseTool)
|
|
*/
|
|
setupEventListeners() {
|
|
// EVENT-002: Event delegation
|
|
this.delegateEvents('.network-monitor-container', 'click', (action, e) => {
|
|
if (action === 'refresh') {
|
|
this.loadRequests();
|
|
}
|
|
});
|
|
|
|
// Filter input with debounce
|
|
const filterInput = this.$('#network-filter');
|
|
if (filterInput) {
|
|
const debouncedFilter = ComponentHelpers.debounce((term) => {
|
|
this.filterUrl = term.toLowerCase();
|
|
this.applyFilters();
|
|
}, 300);
|
|
|
|
this.bindEvent(filterInput, 'input', (e) => debouncedFilter(e.target.value));
|
|
}
|
|
|
|
// Type filter
|
|
const typeFilter = this.$('#network-type-filter');
|
|
if (typeFilter) {
|
|
this.bindEvent(typeFilter, 'change', (e) => {
|
|
this.filterType = e.target.value;
|
|
this.applyFilters();
|
|
});
|
|
}
|
|
|
|
// Auto-refresh toggle
|
|
const autoRefreshToggle = this.$('#auto-refresh-toggle');
|
|
if (autoRefreshToggle) {
|
|
this.bindEvent(autoRefreshToggle, 'change', (e) => {
|
|
this.autoRefresh = e.target.checked;
|
|
if (this.autoRefresh) {
|
|
this.refreshInterval = setInterval(() => this.loadRequests(), 2000);
|
|
logger.debug('[DSNetworkMonitor] Auto-refresh enabled');
|
|
} else {
|
|
if (this.refreshInterval) {
|
|
clearInterval(this.refreshInterval);
|
|
this.refreshInterval = null;
|
|
logger.debug('[DSNetworkMonitor] Auto-refresh disabled');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async loadRequests() {
|
|
const content = this.$('#network-content');
|
|
if (!content) return;
|
|
|
|
// Only show loading on first load
|
|
if (this.requests.length === 0) {
|
|
content.innerHTML = '<div class="loading"><div class="loading-spinner">⏳</div><div>Loading network requests...</div></div>';
|
|
}
|
|
|
|
try {
|
|
const result = await toolBridge.getNetworkRequests(null, 100);
|
|
|
|
if (result && result.requests) {
|
|
this.requests = result.requests;
|
|
this.updateTypeFilter();
|
|
this.applyFilters();
|
|
logger.debug('[DSNetworkMonitor] Loaded requests', { count: this.requests.length });
|
|
} else {
|
|
this.requests = [];
|
|
content.innerHTML = '<div class="table-empty"><div class="table-empty-icon">🌐</div><div class="table-empty-text">No network requests captured</div></div>';
|
|
}
|
|
} catch (error) {
|
|
logger.error('[DSNetworkMonitor] Failed to load network requests', error);
|
|
content.innerHTML = ComponentHelpers.renderError('Failed to load network requests', error);
|
|
}
|
|
}
|
|
|
|
updateTypeFilter() {
|
|
const typeFilter = this.$('#network-type-filter');
|
|
if (!typeFilter) return;
|
|
|
|
const types = this.getResourceTypes();
|
|
const currentValue = typeFilter.value;
|
|
|
|
typeFilter.innerHTML = `
|
|
<option value="all">All Types</option>
|
|
${types.map(type => `<option value="${type}" ${type === currentValue ? 'selected' : ''}>${type}</option>`).join('')}
|
|
`;
|
|
}
|
|
|
|
applyFilters() {
|
|
let filtered = [...this.requests];
|
|
|
|
// Filter by URL
|
|
if (this.filterUrl) {
|
|
filtered = filtered.filter(req =>
|
|
req.url.toLowerCase().includes(this.filterUrl) ||
|
|
req.method.toLowerCase().includes(this.filterUrl)
|
|
);
|
|
}
|
|
|
|
// Filter by type
|
|
if (this.filterType !== 'all') {
|
|
filtered = filtered.filter(req => req.resourceType === this.filterType);
|
|
}
|
|
|
|
this.filteredRequests = filtered;
|
|
this.renderRequests();
|
|
}
|
|
|
|
getResourceTypes() {
|
|
if (!this.requests) return [];
|
|
const types = new Set(this.requests.map(r => r.resourceType).filter(Boolean));
|
|
return Array.from(types).sort();
|
|
}
|
|
|
|
getStatusColor(status) {
|
|
if (status >= 200 && status < 300) return 'success';
|
|
if (status >= 300 && status < 400) return 'info';
|
|
if (status >= 400 && status < 500) return 'warning';
|
|
if (status >= 500) return 'error';
|
|
return 'info';
|
|
}
|
|
|
|
renderRequests() {
|
|
const content = this.$('#network-content');
|
|
if (!content) return;
|
|
|
|
if (!this.filteredRequests || this.filteredRequests.length === 0) {
|
|
content.innerHTML = `
|
|
<div class="table-empty">
|
|
<div class="table-empty-icon">🔍</div>
|
|
<div class="table-empty-text">${this.filterUrl ? 'No requests match your filter' : 'No network requests captured yet'}</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Render info count
|
|
const infoHtml = `
|
|
<div class="info-count">
|
|
Showing ${this.filteredRequests.length} of ${this.requests.length} requests
|
|
${this.autoRefresh ? '• Auto-refreshing every 2s' : ''}
|
|
</div>
|
|
`;
|
|
|
|
// Use table-template.js for DSS-compliant rendering
|
|
const { html: tableHtml, styles: tableStyles } = createTableView({
|
|
columns: [
|
|
{ header: 'Method', key: 'method', width: '80px', align: 'left' },
|
|
{ header: 'Status', key: 'status', width: '80px', align: 'left' },
|
|
{ header: 'URL', key: 'url', align: 'left' },
|
|
{ header: 'Type', key: 'resourceType', width: '100px', align: 'left' },
|
|
{ header: 'Time', key: 'timing', width: '80px', align: 'left' }
|
|
],
|
|
rows: this.filteredRequests,
|
|
renderCell: (col, row) => this.renderCell(col, row),
|
|
renderDetails: (row) => this.renderDetails(row),
|
|
emptyMessage: 'No network requests',
|
|
emptyIcon: '🌐'
|
|
});
|
|
|
|
// Adopt table styles
|
|
this.adoptStyles(tableStyles);
|
|
|
|
// Render table
|
|
content.innerHTML = infoHtml + tableHtml + '<div class="hint">💡 Click any row to view full request details</div>';
|
|
|
|
// Setup table event handlers
|
|
setupTableEvents(this.shadowRoot);
|
|
|
|
logger.debug('[DSNetworkMonitor] Rendered requests', { count: this.filteredRequests.length });
|
|
}
|
|
|
|
renderCell(col, row) {
|
|
const method = row.method || 'GET';
|
|
const status = row.status || '-';
|
|
const statusColor = this.getStatusColor(status);
|
|
const resourceType = row.resourceType || 'other';
|
|
const url = row.url || 'Unknown URL';
|
|
const timing = row.timing ? `${Math.round(row.timing)}ms` : '-';
|
|
|
|
switch (col.key) {
|
|
case 'method':
|
|
const methodColor = method === 'GET' ? 'info' : method === 'POST' ? 'success' : 'warning';
|
|
return `<span class="badge badge-${methodColor}">${this.escapeHtml(method)}</span>`;
|
|
|
|
case 'status':
|
|
return `<span class="badge badge-${statusColor}">${this.escapeHtml(String(status))}</span>`;
|
|
|
|
case 'url':
|
|
return `<span class="code" style="max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">${this.escapeHtml(url)}</span>`;
|
|
|
|
case 'resourceType':
|
|
return `<span class="badge badge-info">${this.escapeHtml(resourceType)}</span>`;
|
|
|
|
case 'timing':
|
|
return `<span style="color: var(--vscode-descriptionForeground);">${timing}</span>`;
|
|
|
|
default:
|
|
return this.escapeHtml(String(row[col.key] || '-'));
|
|
}
|
|
}
|
|
|
|
renderDetails(row) {
|
|
const method = row.method || 'GET';
|
|
const status = row.status || '-';
|
|
const url = row.url || 'Unknown URL';
|
|
const resourceType = row.resourceType || 'other';
|
|
|
|
return `
|
|
<div style="margin-bottom: 8px;">
|
|
<span class="detail-label">URL:</span>
|
|
<span class="detail-value code">${this.escapeHtml(url)}</span>
|
|
</div>
|
|
<div style="margin-bottom: 8px;">
|
|
<span class="detail-label">Method:</span>
|
|
<span class="detail-value code">${this.escapeHtml(method)}</span>
|
|
</div>
|
|
<div style="margin-bottom: 8px;">
|
|
<span class="detail-label">Status:</span>
|
|
<span class="detail-value code">${this.escapeHtml(String(status))}</span>
|
|
</div>
|
|
<div style="margin-bottom: 8px;">
|
|
<span class="detail-label">Type:</span>
|
|
<span class="detail-value code">${this.escapeHtml(resourceType)}</span>
|
|
</div>
|
|
${row.headers ? `
|
|
<div style="margin-top: 12px;">
|
|
<div class="detail-label" style="display: block; margin-bottom: 4px;">Headers:</div>
|
|
<pre class="detail-code">${this.escapeHtml(JSON.stringify(row.headers, null, 2))}</pre>
|
|
</div>
|
|
` : ''}
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('ds-network-monitor', DSNetworkMonitor);
|
|
|
|
export default DSNetworkMonitor;
|