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
306 lines
12 KiB
JavaScript
306 lines
12 KiB
JavaScript
/**
|
|
* ds-quick-wins.js
|
|
* Identifies low-effort, high-impact opportunities for design system adoption
|
|
* UI Team Tool #5
|
|
*/
|
|
|
|
import { ComponentHelpers } from '../../utils/component-helpers.js';
|
|
import contextStore from '../../stores/context-store.js';
|
|
import toolBridge from '../../services/tool-bridge.js';
|
|
|
|
class DSQuickWins extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.quickWins = null;
|
|
this.isAnalyzing = false;
|
|
}
|
|
|
|
async connectedCallback() {
|
|
this.render();
|
|
this.setupEventListeners();
|
|
await this.loadCachedResults();
|
|
}
|
|
|
|
async loadCachedResults() {
|
|
try {
|
|
const context = contextStore.getMCPContext();
|
|
if (!context.project_id) return;
|
|
|
|
const cached = localStorage.getItem(`quickwins_${context.project_id}`);
|
|
if (cached) {
|
|
this.quickWins = JSON.parse(cached);
|
|
this.renderResults();
|
|
}
|
|
} catch (error) {
|
|
console.error('[DSQuickWins] Failed to load cached results:', error);
|
|
}
|
|
}
|
|
|
|
setupEventListeners() {
|
|
const analyzeBtn = this.querySelector('#analyze-quick-wins-btn');
|
|
const pathInput = this.querySelector('#project-path-input');
|
|
|
|
if (analyzeBtn) {
|
|
analyzeBtn.addEventListener('click', () => this.analyzeQuickWins());
|
|
}
|
|
|
|
if (pathInput) {
|
|
pathInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
this.analyzeQuickWins();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async analyzeQuickWins() {
|
|
const pathInput = this.querySelector('#project-path-input');
|
|
const projectPath = pathInput?.value.trim() || '';
|
|
|
|
if (!projectPath) {
|
|
ComponentHelpers.showToast?.('Please enter a project path', 'error');
|
|
return;
|
|
}
|
|
|
|
this.isAnalyzing = true;
|
|
this.updateLoadingState();
|
|
|
|
try {
|
|
// Call dss_find_quick_wins MCP tool
|
|
const result = await toolBridge.executeTool('dss_find_quick_wins', {
|
|
path: projectPath
|
|
});
|
|
|
|
this.quickWins = result;
|
|
|
|
// Cache results
|
|
const context = contextStore.getMCPContext();
|
|
if (context.project_id) {
|
|
localStorage.setItem(`quickwins_${context.project_id}`, JSON.stringify(result));
|
|
}
|
|
|
|
this.renderResults();
|
|
ComponentHelpers.showToast?.('Quick wins analysis complete', 'success');
|
|
} catch (error) {
|
|
console.error('[DSQuickWins] Analysis failed:', error);
|
|
ComponentHelpers.showToast?.(`Analysis failed: ${error.message}`, 'error');
|
|
|
|
const resultsContainer = this.querySelector('#results-container');
|
|
if (resultsContainer) {
|
|
resultsContainer.innerHTML = ComponentHelpers.renderError('Quick wins analysis failed', error);
|
|
}
|
|
} finally {
|
|
this.isAnalyzing = false;
|
|
this.updateLoadingState();
|
|
}
|
|
}
|
|
|
|
updateLoadingState() {
|
|
const analyzeBtn = this.querySelector('#analyze-quick-wins-btn');
|
|
const resultsContainer = this.querySelector('#results-container');
|
|
|
|
if (!analyzeBtn || !resultsContainer) return;
|
|
|
|
if (this.isAnalyzing) {
|
|
analyzeBtn.disabled = true;
|
|
analyzeBtn.textContent = '⏳ Analyzing...';
|
|
resultsContainer.innerHTML = ComponentHelpers.renderLoading('Identifying quick win opportunities...');
|
|
} else {
|
|
analyzeBtn.disabled = false;
|
|
analyzeBtn.textContent = '⚡ Find Quick Wins';
|
|
}
|
|
}
|
|
|
|
renderResults() {
|
|
const resultsContainer = this.querySelector('#results-container');
|
|
if (!resultsContainer || !this.quickWins) return;
|
|
|
|
const opportunities = this.quickWins.opportunities || [];
|
|
const totalImpact = opportunities.reduce((sum, opp) => sum + (opp.impact || 0), 0);
|
|
const avgEffort = opportunities.length > 0
|
|
? (opportunities.reduce((sum, opp) => sum + (opp.effort || 0), 0) / opportunities.length).toFixed(1)
|
|
: 0;
|
|
|
|
resultsContainer.innerHTML = `
|
|
<div style="padding: 16px; overflow: auto; height: 100%;">
|
|
<!-- Summary -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px;">
|
|
${this.createStatCard('Opportunities', opportunities.length, '⚡')}
|
|
${this.createStatCard('Total Impact', `${totalImpact}%`, '📈')}
|
|
${this.createStatCard('Avg Effort', `${avgEffort}h`, '⏱️')}
|
|
</div>
|
|
|
|
<!-- Opportunities List -->
|
|
${opportunities.length === 0 ? ComponentHelpers.renderEmpty('No quick wins found', '✨') : `
|
|
<div style="display: flex; flex-direction: column; gap: 12px;">
|
|
${opportunities.sort((a, b) => (b.impact || 0) - (a.impact || 0)).map((opp, idx) => `
|
|
<div style="background: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
|
|
<div style="flex: 1;">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
|
|
<h4 style="font-size: 12px; font-weight: 600;">${ComponentHelpers.escapeHtml(opp.title)}</h4>
|
|
${this.renderPriorityBadge(opp.priority || 'medium')}
|
|
</div>
|
|
<p style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 8px;">
|
|
${ComponentHelpers.escapeHtml(opp.description)}
|
|
</p>
|
|
</div>
|
|
<div style="text-align: right; margin-left: 16px;">
|
|
<div style="font-size: 10px; color: var(--vscode-text-dim); margin-bottom: 4px;">Impact</div>
|
|
<div style="font-size: 20px; font-weight: 600; color: #89d185;">${opp.impact || 0}%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metrics -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; font-size: 11px; margin-bottom: 12px;">
|
|
<div>
|
|
<div style="color: var(--vscode-text-dim); margin-bottom: 2px;">Effort</div>
|
|
<div style="font-weight: 600;">${opp.effort || 0} hours</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: var(--vscode-text-dim); margin-bottom: 2px;">Files Affected</div>
|
|
<div style="font-weight: 600;">${opp.filesAffected || 0}</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: var(--vscode-text-dim); margin-bottom: 2px;">Type</div>
|
|
<div style="font-weight: 600;">${ComponentHelpers.escapeHtml(opp.type || 'refactor')}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div style="display: flex; gap: 8px;">
|
|
<button class="button apply-quick-win-btn" data-idx="${idx}" style="font-size: 10px; padding: 4px 12px;">
|
|
✨ Apply Fix
|
|
</button>
|
|
<button class="button view-files-btn" data-idx="${idx}" style="font-size: 10px; padding: 4px 12px;">
|
|
📁 View Files
|
|
</button>
|
|
</div>
|
|
|
|
${opp.files && opp.files.length > 0 ? `
|
|
<details style="margin-top: 12px;">
|
|
<summary style="font-size: 10px; color: var(--vscode-text-dim); cursor: pointer;">
|
|
Affected Files (${opp.files.length})
|
|
</summary>
|
|
<div style="margin-top: 8px; padding: 8px; background: var(--vscode-bg); border-radius: 2px; font-family: monospace; font-size: 10px;">
|
|
${opp.files.slice(0, 10).map(file => `<div style="padding: 2px 0;">${ComponentHelpers.escapeHtml(file)}</div>`).join('')}
|
|
${opp.files.length > 10 ? `<div style="padding: 2px 0; color: var(--vscode-text-dim);">...and ${opp.files.length - 10} more</div>` : ''}
|
|
</div>
|
|
</details>
|
|
` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`}
|
|
</div>
|
|
`;
|
|
|
|
// Setup button handlers
|
|
const applyBtns = resultsContainer.querySelectorAll('.apply-quick-win-btn');
|
|
const viewBtns = resultsContainer.querySelectorAll('.view-files-btn');
|
|
|
|
applyBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const idx = parseInt(btn.dataset.idx);
|
|
this.applyQuickWin(opportunities[idx]);
|
|
});
|
|
});
|
|
|
|
viewBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const idx = parseInt(btn.dataset.idx);
|
|
this.viewFiles(opportunities[idx]);
|
|
});
|
|
});
|
|
}
|
|
|
|
createStatCard(label, value, icon) {
|
|
return `
|
|
<div style="background: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px; text-align: center;">
|
|
<div style="font-size: 32px; margin-bottom: 8px;">${icon}</div>
|
|
<div style="font-size: 20px; font-weight: 600; margin-bottom: 4px;">${value}</div>
|
|
<div style="font-size: 11px; color: var(--vscode-text-dim);">${label}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
renderPriorityBadge(priority) {
|
|
const config = {
|
|
high: { color: '#f48771', label: 'High Priority' },
|
|
medium: { color: '#ffbf00', label: 'Medium Priority' },
|
|
low: { color: '#89d185', label: 'Low Priority' }
|
|
};
|
|
|
|
const { color, label } = config[priority] || config.medium;
|
|
|
|
return `<span style="padding: 2px 8px; background: ${color}; border-radius: 2px; font-size: 10px; font-weight: 600;">${label}</span>`;
|
|
}
|
|
|
|
applyQuickWin(opportunity) {
|
|
ComponentHelpers.showToast?.(`Applying: ${opportunity.title}`, 'info');
|
|
// In real implementation, this would trigger automated refactoring
|
|
console.log('Apply quick win:', opportunity);
|
|
}
|
|
|
|
viewFiles(opportunity) {
|
|
if (!opportunity.files || opportunity.files.length === 0) {
|
|
ComponentHelpers.showToast?.('No files associated with this opportunity', 'info');
|
|
return;
|
|
}
|
|
|
|
console.log('View files:', opportunity.files);
|
|
ComponentHelpers.showToast?.(`${opportunity.files.length} files affected`, 'info');
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = `
|
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
|
<!-- Header -->
|
|
<div style="padding: 16px; border-bottom: 1px solid var(--vscode-border); background: var(--vscode-sidebar);">
|
|
<h3 style="font-size: 12px; font-weight: 600; margin-bottom: 12px;">Quick Wins Identification</h3>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end;">
|
|
<div>
|
|
<label style="display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: var(--vscode-text-dim);">
|
|
Project Path
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="project-path-input"
|
|
placeholder="/path/to/your/project"
|
|
class="input"
|
|
style="width: 100%; font-size: 11px; font-family: monospace;"
|
|
/>
|
|
</div>
|
|
|
|
<button id="analyze-quick-wins-btn" class="button" style="font-size: 11px; padding: 6px 16px;">
|
|
⚡ Find Quick Wins
|
|
</button>
|
|
</div>
|
|
|
|
<div style="margin-top: 8px; font-size: 10px; color: var(--vscode-text-dim);">
|
|
💡 Identifies low-effort, high-impact opportunities for design system adoption
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Container -->
|
|
<div id="results-container" style="flex: 1; overflow: hidden;">
|
|
<div style="display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 48px;">
|
|
<div>
|
|
<div style="font-size: 48px; margin-bottom: 16px;">⚡</div>
|
|
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">Ready to Find Quick Wins</h3>
|
|
<p style="font-size: 12px; color: var(--vscode-text-dim);">
|
|
Enter your project path above to identify low-effort, high-impact improvements
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('ds-quick-wins', DSQuickWins);
|
|
|
|
export default DSQuickWins;
|