bruno/dss
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Initial commit: Clean DSS implementation

Browse Source 
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
This commit is contained in:
Digital Production Factory
2025-12-09 18:45:48 -03:00
commit 276ed71f31
884 changed files with 373737 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
admin-ui/js/workdesks/qa-workdesk.js Normal file
View File

@@ -0,0 +1,175 @@
/**
* qa-workdesk.js
* QA Team workdesk - Console logs, network monitoring, DOM inspection
* MVP2: Added metrics frontpage as default view
*/
import BaseWorkdesk from './base-workdesk.js';
import { hydrateComponent } from '../config/component-registry.js';
import '../components/tools/ds-console-viewer.js';
export default class QAWorkdesk extends BaseWorkdesk {
constructor(shell) {
super(shell);
this.teamId = 'qa';
this.teamName = 'QA Team';
this.tools = [
{
id: 'frontpage',
name: 'Dashboard',
description: 'Team metrics and quick actions',
component: 'ds-frontpage'
},
{
id: 'figma-live-compare',
name: 'Figma vs Live',
description: 'QA validation: Figma design vs live implementation',
component: 'ds-figma-live-compare'
},
{
id: 'esre-editor',
name: 'ESRE Editor',
description: 'Edit Explicit Style Requirements and Expectations',
component: 'ds-esre-editor'
},
{
id: 'console-viewer',
name: 'Console Viewer',
description: 'Monitor browser console logs',
mcpTool: 'browser_get_logs'
},
{
id: 'network-monitor',
name: 'Network Monitor',
description: 'Track network requests',
mcpTool: 'devtools_network_requests'
},
{
id: 'error-tracker',
name: 'Error Tracker',
description: 'Track uncaught exceptions',
mcpTool: 'browser_get_errors'
}
];
this.currentTool = 'frontpage';
}
async loadTool(tool) {
const stage = this.shell.stageContent;
if (!stage) return;
// For tools with components, load them dynamically
if (tool.component) {
// Show loading state
stage.innerHTML = `
<div style="display: flex; align-items: center; justify-content: center; height: 100%; padding: 48px;">
<div style="text-align: center;">
<div style="font-size: 24px; margin-bottom: 12px;">⏳</div>
<div style="font-size: 12px; color: var(--vscode-text-dim);">Loading ${tool.name}...</div>
</div>
</div>
`;
try {
// Clear the stage and hydrate the component
stage.innerHTML = '';
await hydrateComponent(tool.component, stage);
console.log(`[QAWorkdesk] Loaded component: ${tool.component}`);
} catch (error) {
console.error(`[QAWorkdesk] Failed to load tool ${tool.component}:`, error);
stage.innerHTML = `
<div style="padding: 24px;">
<h2 style="margin-bottom: 16px; color: var(--vscode-error);">Error Loading Tool</h2>
<p style="color: var(--vscode-text-dim);">${error.message}</p>
</div>
`;
}
} else {
// Fall back to base implementation for MCP tools
super.loadTool(tool);
}
}
renderStage() {
const stage = this.shell.stageContent;
if (!stage) return;
stage.innerHTML = `
<div style="padding: 24px;">
<h1 style="margin-bottom: 8px; font-size: 24px;">QA Team Workdesk</h1>
<p style="color: var(--vscode-text-dim); margin-bottom: 32px;">
QA validation, testing, and debugging tools
</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
${this.createCard('QA Validation', `
<p>Compare and validate implementations:</p>
<ul style="margin-top: 8px; padding-left: 20px;">
<li>Figma vs Live comparison</li>
<li>Screenshot capture</li>
<li>Visual validation</li>
<li>Style requirements (ESRE)</li>
</ul>
`)}
${this.createCard('Console Monitoring', `
<p>Real-time console log streaming:</p>
<ul style="margin-top: 8px; padding-left: 20px;">
<li>Log, warn, error levels</li>
<li>Stack trace analysis</li>
<li>Filter by severity</li>
<li>Export logs</li>
</ul>
`)}
${this.createCard('Network Debugging', `
<p>Track all HTTP requests:</p>
<ul style="margin-top: 8px; padding-left: 20px;">
<li>Request/response headers</li>
<li>Payload inspection</li>
<li>Timing analysis</li>
<li>Failed requests</li>
</ul>
`)}
</div>
<div style="margin-top: 32px;">
<h2 style="margin-bottom: 16px; font-size: 16px;">Quick Actions</h2>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<button class="button" id="compare-btn">Figma vs Live</button>
<button class="button" id="esre-btn">Edit ESRE</button>
<button class="button" id="console-btn">Open Console</button>
<button class="button" id="network-btn">Network Monitor</button>
</div>
</div>
</div>
`;
// Setup button handlers
stage.querySelector('#compare-btn')?.addEventListener('click', () => {
this.onToolClick('figma-live-compare');
});
stage.querySelector('#esre-btn')?.addEventListener('click', () => {
this.onToolClick('esre-editor');
});
stage.querySelector('#console-btn')?.addEventListener('click', () => {
this.onToolClick('console-viewer');
// Switch panel to console tab (component is already configured via panel-config.js)
const panel = this.shell.querySelector('ds-panel');
if (panel) {
panel.switchTab('console');
}
});
stage.querySelector('#network-btn')?.addEventListener('click', () => {
this.onToolClick('network-monitor');
// Switch panel to network tab (component is already configured via panel-config.js)
const panel = this.shell.querySelector('ds-panel');
if (panel) {
panel.switchTab('network');
}
});
}
}