Initial commit: Clean DSS implementation
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
381
admin-ui/index-legacy.html
Executable file
381
admin-ui/index-legacy.html
Executable file
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Server</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/admin-ui/favicon.svg">
|
||||
|
||||
<!-- DSS Layered CSS Architecture -->
|
||||
<!-- Layer 0: Core/Structural (reset, grid, utilities) -->
|
||||
<link rel="stylesheet" href="/admin-ui/css/dss-core.css">
|
||||
<!-- Layer 1: Design Tokens (colors, spacing, typography) -->
|
||||
<link rel="stylesheet" href="/admin-ui/css/dss-tokens.css">
|
||||
<!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->
|
||||
<link rel="stylesheet" href="/admin-ui/css/dss-theme.css">
|
||||
<!-- Layer 3: Component Styles (styled components using semantic tokens) -->
|
||||
<link rel="stylesheet" href="/admin-ui/css/dss-components.css">
|
||||
|
||||
<!-- Markdown & Syntax Highlighting -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="app-layout">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<div class="sidebar__logo">
|
||||
<div class="sidebar__logo-icon">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>DSS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar__nav" id="main-nav" aria-label="Main navigation">
|
||||
<!-- Overview -->
|
||||
<div class="nav-section__title">Overview</div>
|
||||
<a class="nav-item active" data-page="dashboard" href="#dashboard" tabindex="0">
|
||||
<svg class="nav-item__icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="7" height="9" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="5" rx="1"/>
|
||||
<rect x="14" y="12" width="7" height="9" rx="1"/>
|
||||
<rect x="3" y="16" width="7" height="5" rx="1"/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="nav-item" data-page="projects" href="#projects" tabindex="0">
|
||||
<svg class="nav-item__icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M3 3h18v18H3z"/>
|
||||
<path d="M21 9H3"/>
|
||||
<path d="M9 21V9"/>
|
||||
</svg>
|
||||
Projects
|
||||
</a>
|
||||
|
||||
<!-- Tools -->
|
||||
<div class="nav-section">
|
||||
<div class="nav-section__title">Tools</div>
|
||||
<div class="nav-section__content">
|
||||
<div class="nav-sub-section">
|
||||
<div class="nav-sub-section__title">Analysis</div>
|
||||
<a class="nav-item nav-item--level-2" data-page="services" href="#services" tabindex="0">Services</a>
|
||||
<a class="nav-item nav-item--level-2" data-page="quick-wins" href="#quick-wins" tabindex="0">Quick Wins</a>
|
||||
</div>
|
||||
<a class="nav-item nav-item--level-1" data-page="chat" href="#chat" tabindex="0">Chat</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design System -->
|
||||
<div class="nav-section">
|
||||
<div class="nav-section__title">Design System</div>
|
||||
<div class="nav-section__content">
|
||||
<div class="nav-sub-section">
|
||||
<div class="nav-sub-section__title">Foundations</div>
|
||||
<a class="nav-item nav-item--level-2" data-page="tokens" href="#tokens" tabindex="0">Tokens</a>
|
||||
<a class="nav-item nav-item--level-2" data-page="components" href="#components" tabindex="0">Components</a>
|
||||
</div>
|
||||
<div class="nav-sub-section">
|
||||
<div class="nav-sub-section__title">Integrations</div>
|
||||
<a class="nav-item nav-item--level-2" data-page="figma" href="#figma" tabindex="0">Figma</a>
|
||||
<a id="storybook-link" class="nav-item nav-item--level-2" href="http://localhost:6006" target="_blank" tabindex="0">Storybook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System -->
|
||||
<div class="nav-section">
|
||||
<div class="nav-section__title">System</div>
|
||||
<div class="nav-section__content">
|
||||
<a class="nav-item nav-item--level-1" data-page="docs" href="#docs" tabindex="0">Docs</a>
|
||||
<div class="nav-sub-section">
|
||||
<div class="nav-sub-section__title">Administration</div>
|
||||
<a class="nav-item nav-item--level-2" data-page="teams" href="#teams" tabindex="0">Teams</a>
|
||||
<a class="nav-item nav-item--level-2" data-page="audit" href="#audit" tabindex="0">Audit</a>
|
||||
<a class="nav-item nav-item--level-2" data-page="plugins" href="#plugins" tabindex="0">Plugins</a>
|
||||
<a class="nav-item nav-item--level-2" data-page="settings" href="#settings" tabindex="0">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar__help">
|
||||
<details class="help-panel">
|
||||
<summary class="help-panel__toggle" tabindex="0">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
Quick Guide
|
||||
</summary>
|
||||
<div class="help-panel__content">
|
||||
<div class="help-section" data-team="ui">
|
||||
<strong>UI Team</strong>
|
||||
<ul>
|
||||
<li>Extract tokens from Figma</li>
|
||||
<li>Sync to CSS variables</li>
|
||||
<li>Generate components</li>
|
||||
<li>Check token drift</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="help-section" data-team="ux">
|
||||
<strong>UX Team</strong>
|
||||
<ul>
|
||||
<li>Add Figma files to project</li>
|
||||
<li>Run visual diff checks</li>
|
||||
<li>Review token consistency</li>
|
||||
<li>Validate components</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="help-section" data-team="qa">
|
||||
<strong>QA Team</strong>
|
||||
<ul>
|
||||
<li>Define ESRE test cases</li>
|
||||
<li>Run component validation</li>
|
||||
<li>Review visual regressions</li>
|
||||
<li>Export audit logs</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="help-section" data-team="all">
|
||||
<strong>Getting Started</strong>
|
||||
<ol>
|
||||
<li>Create a project</li>
|
||||
<li>Add Figma file key</li>
|
||||
<li>Extract & sync tokens</li>
|
||||
<li>Use AI chat for help</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<ds-badge data-variant="outline">v1.0.0</ds-badge>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<div class="app-header__project-selector" id="project-selector-container">
|
||||
<!-- Project selector will be rendered here -->
|
||||
</div>
|
||||
<div class="app-header__team-selector">
|
||||
<label for="team-context-select" class="sr-only">Select team context</label>
|
||||
<select class="team-select" id="team-context-select" aria-label="Team context">
|
||||
<option value="all">All Teams</option>
|
||||
<option value="ui">UI Team</option>
|
||||
<option value="ux">UX Team</option>
|
||||
<option value="qa">QA Team</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="app-header__actions">
|
||||
<ds-button data-variant="ghost" data-size="icon" title="Toggle theme" id="theme-toggle" tabindex="0" aria-label="Toggle dark/light theme">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
|
||||
</svg>
|
||||
</ds-button>
|
||||
<div class="notification-toggle-container" style="position: relative;">
|
||||
<ds-button data-variant="ghost" data-size="icon" id="notification-toggle" title="Notifications" tabindex="0" aria-label="View notifications">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
|
||||
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
|
||||
</svg>
|
||||
</ds-button>
|
||||
<span id="notification-indicator" class="status-dot status-dot--error" style="position: absolute; top: 6px; right: 6px; display: none;"></span>
|
||||
<ds-notification-center></ds-notification-center>
|
||||
</div>
|
||||
<ds-button data-variant="ghost" data-size="icon" id="sidebar-toggle" title="Toggle AI Assistant" tabindex="0" aria-label="Toggle AI Assistant sidebar" aria-controls="ai-sidebar" aria-expanded="true">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</ds-button>
|
||||
<div class="ds-avatar" tabindex="0" role="button" aria-label="User profile menu">
|
||||
<span>U</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="app-main">
|
||||
<div id="landing-page" class="landing-page active">
|
||||
<!-- Landing page content will be rendered here -->
|
||||
</div>
|
||||
<div id="page-content" class="app-content" style="display: none;">
|
||||
<!-- Page content injected here -->
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar - AI Chat -->
|
||||
<aside class="app-sidebar" id="ai-sidebar">
|
||||
<ds-ai-chat></ds-ai-chat>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast Provider for notifications -->
|
||||
<ds-toast-provider></ds-toast-provider>
|
||||
|
||||
<!-- Load Components -->
|
||||
<script type="module">
|
||||
// Import theme manager first (loads saved theme from cookie)
|
||||
import themeManager from '/admin-ui/js/core/theme.js';
|
||||
|
||||
// Import all components
|
||||
import '/admin-ui/js/components/ds-button.js';
|
||||
import '/admin-ui/js/components/ds-card.js';
|
||||
import '/admin-ui/js/components/ds-input.js';
|
||||
import '/admin-ui/js/components/ds-badge.js';
|
||||
import '/admin-ui/js/components/ds-action-bar.js';
|
||||
import '/admin-ui/js/components/ds-toast.js';
|
||||
import '/admin-ui/js/components/ds-toast-provider.js';
|
||||
import '/admin-ui/js/components/ds-notification-center.js';
|
||||
import '/admin-ui/js/components/ds-workflow.js';
|
||||
import '/admin-ui/js/core/ai.js';
|
||||
|
||||
// Import stores and services
|
||||
import contextStore from '/admin-ui/js/stores/context-store.js';
|
||||
import notificationService from '/admin-ui/js/services/notification-service.js';
|
||||
|
||||
// Import browser logger for debugging
|
||||
import '/admin-ui/js/core/browser-logger.js';
|
||||
|
||||
// Import navigation manager
|
||||
import NavigationManager from '/admin-ui/js/core/navigation.js';
|
||||
|
||||
// Import and initialize app
|
||||
import app from '/admin-ui/js/core/app.js';
|
||||
|
||||
// Initialize when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
app.init();
|
||||
|
||||
// Initialize navigation manager
|
||||
new NavigationManager(document.querySelector('.sidebar__nav'));
|
||||
|
||||
// Setup theme toggle button
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', () => {
|
||||
themeManager.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
// Setup team context selector
|
||||
const teamSelect = document.getElementById('team-context-select');
|
||||
const updateHelpSections = (team) => {
|
||||
document.querySelectorAll('.help-section').forEach(section => {
|
||||
const sectionTeam = section.dataset.team;
|
||||
section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';
|
||||
});
|
||||
};
|
||||
|
||||
if (teamSelect) {
|
||||
const savedTeam = localStorage.getItem('dss_team_context') || 'all';
|
||||
teamSelect.value = savedTeam;
|
||||
updateHelpSections(savedTeam);
|
||||
contextStore.setContext({ team: savedTeam });
|
||||
|
||||
teamSelect.addEventListener('change', (e) => {
|
||||
const team = e.target.value;
|
||||
localStorage.setItem('dss_team_context', team);
|
||||
updateHelpSections(team);
|
||||
contextStore.setContext({ team });
|
||||
window.dispatchEvent(new CustomEvent('team-context-changed', {
|
||||
detail: { team }
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
// Setup AI sidebar toggle
|
||||
const sidebarToggle = document.getElementById('sidebar-toggle');
|
||||
const aiSidebar = document.getElementById('ai-sidebar');
|
||||
if (sidebarToggle && aiSidebar) {
|
||||
// Restore saved state
|
||||
const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';
|
||||
if (sidebarCollapsed) {
|
||||
aiSidebar.classList.add('collapsed');
|
||||
sidebarToggle.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
|
||||
sidebarToggle.addEventListener('click', () => {
|
||||
const isCollapsed = aiSidebar.classList.toggle('collapsed');
|
||||
sidebarToggle.setAttribute('aria-expanded', !isCollapsed);
|
||||
localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);
|
||||
});
|
||||
}
|
||||
|
||||
// Setup Notification Center toggle
|
||||
const notificationToggle = document.getElementById('notification-toggle');
|
||||
const notificationCenter = document.querySelector('ds-notification-center');
|
||||
const notificationIndicator = document.getElementById('notification-indicator');
|
||||
|
||||
if (notificationToggle && notificationCenter) {
|
||||
notificationToggle.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = notificationCenter.hasAttribute('open');
|
||||
if (isOpen) {
|
||||
notificationCenter.removeAttribute('open');
|
||||
} else {
|
||||
notificationCenter.setAttribute('open', '');
|
||||
}
|
||||
});
|
||||
|
||||
// Close when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {
|
||||
notificationCenter.removeAttribute('open');
|
||||
}
|
||||
});
|
||||
|
||||
// Update unread indicator
|
||||
notificationService.addEventListener('unread-count-changed', (e) => {
|
||||
const { count } = e.detail;
|
||||
if (notificationIndicator) {
|
||||
notificationIndicator.style.display = count > 0 ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Handle notification actions
|
||||
notificationCenter.addEventListener('notification-action', (e) => {
|
||||
const { event, payload } = e.detail;
|
||||
console.log('Notification action:', event, payload);
|
||||
// Handle navigation or other actions based on event type
|
||||
if (event.startsWith('navigate:')) {
|
||||
const page = event.replace('navigate:', '');
|
||||
window.location.hash = page;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for "Ask AI" events from anywhere in the app
|
||||
window.addEventListener('dss-ask-ai', (e) => {
|
||||
const { prompt, openSidebar } = e.detail;
|
||||
if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {
|
||||
aiSidebar.classList.remove('collapsed');
|
||||
sidebarToggle?.setAttribute('aria-expanded', 'true');
|
||||
localStorage.setItem('dss_ai_sidebar_collapsed', 'false');
|
||||
}
|
||||
// The ds-ai-chat component should handle the prompt
|
||||
const aiChat = document.querySelector('ds-ai-chat');
|
||||
if (aiChat && typeof aiChat.setInput === 'function') {
|
||||
aiChat.setInput(prompt);
|
||||
}
|
||||
});
|
||||
|
||||
// Update context store on page navigation
|
||||
window.addEventListener('hashchange', () => {
|
||||
const page = window.location.hash.substring(1) || 'dashboard';
|
||||
contextStore.setContext({ page });
|
||||
});
|
||||
// Set initial page
|
||||
contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user