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
468 lines
53 KiB
JSON
468 lines
53 KiB
JSON
{
|
|
"sessionId": "session-1765032740748-n82tkqspp",
|
|
"exportedAt": "2025-12-06T14:53:21.590Z",
|
|
"logs": [
|
|
{
|
|
"timestamp": 1765032740748,
|
|
"relativeTime": 0,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Initializing application... color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Initializing application...",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032740754,
|
|
"relativeTime": 6,
|
|
"level": "metric",
|
|
"category": "performance",
|
|
"message": "Page load completed",
|
|
"data": {
|
|
"domContentLoaded": 0.4000000059604645,
|
|
"loadComplete": 0.09999999403953552,
|
|
"totalTime": 234.19999998807907,
|
|
"dnsLookup": 0,
|
|
"tcpConnection": 0,
|
|
"requestTime": 191.09999999403954,
|
|
"responseTime": 0.5,
|
|
"renderTime": null
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741055,
|
|
"relativeTime": 307,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/projects",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/projects",
|
|
"initiatorType": "fetch",
|
|
"duration": 303.2000000178814,
|
|
"transferSize": 527,
|
|
"encodedBodySize": 227,
|
|
"decodedBodySize": 227
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741056,
|
|
"relativeTime": 308,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "[ConfigLoader] Configuration loaded successfully [object Object]",
|
|
"data": {
|
|
"args": [
|
|
"[ConfigLoader] Configuration loaded successfully",
|
|
{
|
|
"dssHost": "localhost",
|
|
"dssPort": "3456",
|
|
"storybookPort": 6006
|
|
}
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741056,
|
|
"relativeTime": 308,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Server configuration loaded color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Server configuration loaded",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741057,
|
|
"relativeTime": 309,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0 color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741057,
|
|
"relativeTime": 309,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing... color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing...",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741057,
|
|
"relativeTime": 309,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741057,
|
|
"relativeTime": 309,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Plugins initialized color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Plugins initialized",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741057,
|
|
"relativeTime": 309,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Messaging system initialized color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Messaging system initialized",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741061,
|
|
"relativeTime": 313,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Router initialized with 12 routes color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Router initialized with 12 routes",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741061,
|
|
"relativeTime": 313,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741063,
|
|
"relativeTime": 315,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/config",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/config",
|
|
"initiatorType": "fetch",
|
|
"duration": 307.30000001192093,
|
|
"transferSize": 361,
|
|
"encodedBodySize": 61,
|
|
"decodedBodySize": 61
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741256,
|
|
"relativeTime": 508,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udee1\ufe0f [App] Failed to load initial data color: #F44336; font-weight: bold Error: Health check failed",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udee1\ufe0f [App] Failed to load initial data",
|
|
"color: #F44336; font-weight: bold",
|
|
{}
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741260,
|
|
"relativeTime": 512,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Application initialized successfully color: #2196F3; font-weight: bold",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Application initialized successfully",
|
|
"color: #2196F3; font-weight: bold"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741308,
|
|
"relativeTime": 560,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 193.40000000596046,
|
|
"transferSize": 321,
|
|
"encodedBodySize": 21,
|
|
"decodedBodySize": 21
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032747131,
|
|
"relativeTime": 6383,
|
|
"level": "debug",
|
|
"category": "console",
|
|
"message": "[BrowserLogger] Synced 16 logs to server",
|
|
"data": {
|
|
"args": [
|
|
"[BrowserLogger] Synced 16 logs to server"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032747185,
|
|
"relativeTime": 6437,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/browser-logs",
|
|
"initiatorType": "fetch",
|
|
"duration": 537.2999999821186,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032762750,
|
|
"relativeTime": 22002,
|
|
"level": "info",
|
|
"category": "snapshot",
|
|
"message": "Navigation detected",
|
|
"data": {
|
|
"trigger": "navigation",
|
|
"from": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"snapshot": {
|
|
"timestamp": 1765032762749,
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"html": "<html lang=\"en\" class=\"light\"><head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Design System Server</title>\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n <!-- Design System Styles -->\n <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n\n <!-- Markdown & Syntax Highlighting -->\n <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n <style>\n /* App Layout */\n .app-layout {\n display: grid;\n grid-template-columns: 240px 1fr;\n grid-template-rows: auto 1fr;\n min-height: 100vh;\n }\n\n /* Sidebar */\n .sidebar {\n grid-row: 1 / -1;\n background: var(--card);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n }\n\n .sidebar__header {\n padding: var(--space-4) var(--space-5);\n border-bottom: 1px solid var(--border);\n }\n\n .sidebar__logo {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-weight: var(--font-semibold);\n font-size: var(--text-lg);\n color: var(--foreground);\n }\n\n .sidebar__logo-icon {\n width: 2rem;\n height: 2rem;\n background: var(--primary);\n border-radius: var(--radius);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary-foreground);\n }\n\n .sidebar__nav {\n flex: 1;\n padding: var(--space-4);\n }\n\n .nav-section {\n margin-bottom: var(--space-6);\n }\n\n .nav-section__title {\n font-size: var(--text-xs);\n font-weight: var(--font-medium);\n color: var(--muted-foreground);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: var(--space-2);\n padding: 0 var(--space-3);\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius);\n color: var(--muted-foreground);\n text-decoration: none;\n font-size: var(--text-sm);\n transition: all var(--duration-fast) var(--ease-default);\n cursor: pointer;\n }\n\n .nav-item:hover {\n background: var(--accent);\n color: var(--accent-foreground);\n text-decoration: none;\n }\n\n .nav-item.active {\n background: var(--primary);\n color: var(--primary-foreground);\n }\n\n .nav-item__icon {\n width: 1.25rem;\n height: 1.25rem;\n opacity: 0.7;\n }\n\n .nav-item.active .nav-item__icon {\n opacity: 1;\n }\n\n .sidebar__help {\n padding: var(--space-3);\n border-top: 1px solid var(--border);\n }\n\n .help-panel {\n font-size: var(--text-xs);\n }\n\n .help-panel__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n color: var(--muted-foreground);\n padding: var(--space-2);\n border-radius: var(--radius);\n list-style: none;\n }\n\n .help-panel__toggle:hover {\n background: var(--accent);\n color: var(--accent-foreground);\n }\n\n .help-panel__toggle::-webkit-details-marker {\n display: none;\n }\n\n .help-panel__content {\n padding: var(--space-2) var(--space-3);\n }\n\n .help-section {\n margin-bottom: var(--space-3);\n }\n\n .help-section strong {\n color: var(--foreground);\n font-size: var(--text-xs);\n }\n\n .help-section ul, .help-section ol {\n margin: var(--space-1) 0 0 var(--space-4);\n padding: 0;\n color: var(--muted-foreground);\n }\n\n .help-section li {\n margin-bottom: 2px;\n }\n\n .sidebar__footer {\n padding: var(--space-4);\n border-top: 1px solid var(--border);\n }\n\n /* Header */\n .app-header {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-6);\n background: var(--card);\n border-bottom: 1px solid var(--border);\n }\n\n .app-header__project-selector {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n }\n\n .project-selector {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background: var(--muted);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n font-size: var(--text-sm);\n width: 200px;\n }\n\n .project-selector__label {\n font-weight: var(--font-medium);\n color: var(--muted-foreground);\n font-size: var(--text-xs);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n .project-selector__select {\n flex: 1;\n background: transparent;\n border: none;\n color: var(--foreground);\n font-size: var(--text-sm);\n font-weight: var(--font-medium);\n outline: none;\n cursor: pointer;\n padding: var(--space-1) 0;\n }\n\n .project-selector__select option {\n background: var(--popover);\n color: var(--popover-foreground);\n }\n\n .project-selector__icon {\n width: 16px;\n height: 16px;\n color: var(--primary);\n }\n\n .app-header__team-selector {\n display: flex;\n align-items: center;\n }\n\n .team-select {\n padding: var(--space-2) var(--space-3);\n background: var(--muted);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n color: var(--foreground);\n font-size: var(--text-sm);\n cursor: pointer;\n width: 200px;\n }\n\n .team-select:focus {\n outline: none;\n border-color: var(--ring);\n }\n\n .app-header__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-left: auto;\n }\n\n /* Main Content */\n .app-main {\n display: grid;\n grid-template-columns: 1fr;\n overflow: hidden;\n position: relative;\n }\n\n .app-content {\n padding: var(--space-6);\n padding-right: 340px;\n overflow-y: auto;\n }\n\n .app-sidebar {\n width: 320px;\n height: 100vh;\n min-height: 100vh;\n border-left: 1px solid var(--border);\n background: var(--card);\n display: flex;\n flex-direction: column;\n transition: width 0.2s ease, transform 0.2s ease;\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: 50;\n }\n\n .app-sidebar.collapsed {\n width: 0;\n overflow: hidden;\n border-left: none;\n }\n\n .sidebar-toggle {\n position: fixed;\n right: 320px;\n bottom: 20px;\n z-index: 49;\n width: 48px;\n height: 48px;\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n transition: right 0.2s ease, background 0.15s;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .sidebar-toggle:hover {\n background: var(--accent);\n color: var(--foreground);\n }\n\n .sidebar-toggle.collapsed {\n right: 0;\n }\n\n .sidebar-toggle svg {\n transition: transform 0.2s ease;\n }\n\n .sidebar-toggle.collapsed svg {\n transform: rotate(180deg);\n }\n\n /* Page Header */\n .page-header h1 {\n font-size: var(--text-2xl);\n margin-bottom: var(--space-1);\n }\n\n /* Docs Layout */\n .docs-layout {\n display: grid;\n grid-template-columns: 200px 1fr;\n gap: var(--space-6);\n min-height: 0;\n }\n\n .docs-nav {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n .docs-nav__section {\n margin-bottom: var(--space-4);\n }\n\n .docs-nav__title {\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--muted-foreground);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: var(--space-2);\n }\n\n .docs-nav__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n font-size: var(--text-sm);\n color: var(--muted-foreground);\n text-decoration: none;\n border-radius: var(--radius);\n cursor: pointer;\n }\n\n .docs-nav__link:hover {\n color: var(--foreground);\n background: var(--accent);\n }\n\n .docs-nav__link.active {\n color: var(--primary);\n background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n }\n\n .docs-content {\n max-width: 700px;\n }\n\n .docs-content h2 {\n font-size: var(--text-xl);\n font-weight: var(--font-semibold);\n margin-bottom: var(--space-4);\n padding-bottom: var(--space-2);\n border-bottom: 1px solid var(--border);\n }\n\n .docs-content h3 {\n font-size: var(--text-base);\n font-weight: var(--font-semibold);\n margin: var(--space-4) 0 var(--space-2);\n }\n\n .docs-content p {\n margin-bottom: var(--space-3);\n line-height: 1.6;\n }\n\n .docs-content ul, .docs-content ol {\n margin: 0 0 var(--space-3) var(--space-4);\n line-height: 1.6;\n }\n\n .docs-content li {\n margin-bottom: var(--space-1);\n }\n\n .docs-content pre {\n background: var(--muted);\n padding: var(--space-3);\n border-radius: var(--radius);\n overflow-x: auto;\n margin-bottom: var(--space-3);\n font-size: var(--text-sm);\n }\n\n .docs-content code {\n font-family: ui-monospace, monospace;\n font-size: 0.9em;\n }\n\n .docs-content a {\n color: var(--primary);\n }\n\n /* Stats */\n .stat {\n text-align: center;\n }\n\n .stat__label {\n font-size: var(--text-sm);\n color: var(--muted-foreground);\n margin-bottom: var(--space-1);\n }\n\n .stat__value {\n font-size: var(--text-2xl);\n font-weight: var(--font-bold);\n }\n\n /* Status Dot */\n .status-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: var(--radius-full);\n background: var(--muted);\n }\n\n .status-dot--success { background: var(--success); }\n .status-dot--warning { background: var(--warning); }\n .status-dot--error { background: var(--destructive); }\n\n /* Responsive */\n @media (max-width: 1024px) {\n .app-main {\n grid-template-columns: 1fr;\n }\n\n .app-sidebar {\n display: none;\n }\n }\n\n @media (max-width: 768px) {\n .app-layout {\n grid-template-columns: 1fr;\n }\n\n .sidebar {\n display: none;\n }\n }\n </style>\n</head>\n<body>\n <div id=\"app\" class=\"app-layout\">\n <!-- Sidebar -->\n <aside class=\"sidebar\">\n <div class=\"sidebar__header\">\n <div class=\"sidebar__logo\">\n <div class=\"sidebar__logo-icon\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n <path d=\"M2 17l10 5 10-5\"></path>\n <path d=\"M2 12l10 5 10-5\"></path>\n </svg>\n </div>\n <span>DSS</span>\n </div>\n </div>\n\n <nav class=\"sidebar__nav\" aria-label=\"Main navigation\">\n <div class=\"nav-section\">\n <div class=\"nav-section__title\">Overview</div>\n <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n </svg>\n Dashboard\n </a>\n <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M3 3h18v18H3z\"></path>\n <path d=\"M21 9H3\"></path>\n <path d=\"M9 21V9\"></path>\n </svg>\n Projects\n </a>\n </div>\n\n <div class=\"nav-section\">\n <div class=\"nav-section__title\">Tools</div>\n <a class=\"nav-item\" data-page=\"services\" href=\"#services\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n </svg>\n Services\n </a>\n <a class=\"nav-item\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon>\n </svg>\n Quick Wins\n </a>\n <a class=\"nav-item\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n </svg>\n Chat\n </a>\n </div>\n\n <div class=\"nav-section\">\n <div class=\"nav-section__title\">Design System</div>\n <a class=\"nav-item\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <circle cx=\"12\" cy=\"12\" r=\"4\"></circle>\n </svg>\n Tokens\n </a>\n <a class=\"nav-item\" data-page=\"components\" href=\"#components\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n <path d=\"M3 9h18\"></path>\n <path d=\"M9 21V9\"></path>\n </svg>\n Components\n </a>\n <a class=\"nav-item\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\"></path>\n <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\"></path>\n <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\"></path>\n <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\"></path>\n <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\"></path>\n </svg>\n Figma\n </a>\n <a id=\"storybook-link\" class=\"nav-item\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>\n </svg>\n Storybook\n </a>\n </div>\n\n <div class=\"nav-section\">\n <div class=\"nav-section__title\">System</div>\n <a class=\"nav-item\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"></path>\n <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"></path>\n </svg>\n Docs\n </a>\n <a class=\"nav-item\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n </svg>\n Teams\n </a>\n <a class=\"nav-item\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n <polyline points=\"14 2 14 8 20 8\"></polyline>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\n <polyline points=\"10 9 9 9 8 9\"></polyline>\n </svg>\n Audit Log\n </a>\n <a class=\"nav-item\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n Plugins\n </a>\n <a class=\"nav-item active\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n Settings\n </a>\n </div>\n </nav>\n\n <div class=\"sidebar__help\">\n <details class=\"help-panel\">\n <summary class=\"help-panel__toggle\" tabindex=\"0\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n </svg>\n Quick Guide\n </summary>\n <div class=\"help-panel__content\">\n <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n <strong>UI Team</strong>\n <ul>\n <li>Extract tokens from Figma</li>\n <li>Sync to CSS variables</li>\n <li>Generate components</li>\n <li>Check token drift</li>\n </ul>\n </div>\n <div class=\"help-section\" data-team=\"ux\">\n <strong>UX Team</strong>\n <ul>\n <li>Add Figma files to project</li>\n <li>Run visual diff checks</li>\n <li>Review token consistency</li>\n <li>Validate components</li>\n </ul>\n </div>\n <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n <strong>QA Team</strong>\n <ul>\n <li>Define ESRE test cases</li>\n <li>Run component validation</li>\n <li>Review visual regressions</li>\n <li>Export audit logs</li>\n </ul>\n </div>\n <div class=\"help-section\" data-team=\"all\">\n <strong>Getting Started</strong>\n <ol>\n <li>Create a project</li>\n <li>Add Figma file key</li>\n <li>Extract & sync tokens</li>\n <li>Use AI chat for help</li>\n </ol>\n </div>\n </div>\n </details>\n </div>\n <div class=\"sidebar__footer\">\n <ds-badge variant=\"outline\" dot=\"\">v0.8.0</ds-badge>\n </div>\n </aside>\n\n <!-- Header -->\n <header class=\"app-header\">\n <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n <!-- Project selector will be rendered here -->\n </div>\n <div class=\"app-header__team-selector\">\n <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n <option value=\"all\">All Teams</option>\n <option value=\"ui\">UI Team</option>\n <option value=\"ux\">UX Team</option>\n <option value=\"qa\">QA Team</option>\n </select>\n </div>\n <div class=\"app-header__actions\">\n <ds-button variant=\"ghost\" size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <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\"></path>\n </svg>\n </ds-button>\n <ds-button variant=\"ghost\" size=\"icon\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n </svg>\n </ds-button>\n <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n <span>U</span>\n </div>\n </div>\n </header>\n\n <!-- Main Content Area -->\n <main class=\"app-main\">\n <div id=\"page-content\" class=\"app-content\">\n <div class=\"page-header\">\n <h1>Settings</h1>\n <p class=\"text-muted\">Configure your design system server</p>\n </div>\n\n <div class=\"mt-6 flex flex-col gap-6\">\n \n \n \n Server Mode\n Choose how DSS operates\n \n \n <div class=\"flex gap-4\">\n <div data-mode=\"local\" data-action=\"setMode\" style=\"background: var(--muted)\" class=\"flex-1 p-4 rounded cursor-pointer ring-2 ring-primary\">\n <h4 class=\"font-medium mb-1\">Local Dev Companion</h4>\n <p class=\"text-sm text-muted\">Run alongside your project, provides UI dev assistance, component preview, and local services.</p>\n </div>\n <div data-mode=\"server\" data-action=\"setMode\" style=\"background: var(--muted)\" class=\"flex-1 p-4 rounded cursor-pointer\">\n <h4 class=\"font-medium mb-1\">Remote Server</h4>\n <p class=\"text-sm text-muted\">Deployed centrally, serves design systems to teams, multi-project management.</p>\n </div>\n </div>\n \n \n\n \n \n \n Figma Integration\n Connect to Figma API\n \n Not configured\n \n \n \n <div class=\"flex flex-col gap-4\">\n \n <p class=\"text-xs text-muted\">\n Get your token from <a class=\"text-primary\" target=\"_blank\" href=\"https://www.figma.com/developers/api#access-tokens\">Figma Settings \u2192 Personal Access Tokens</a>\n </p>\n <div class=\"flex gap-2\">\n \n Save Token\n \n \n Test Connection\n \n </div>\n \n </div>\n \n \n\n \n \n \n External Tools & Integrations\n Configure connected tools and services\n \n \n <div class=\"flex flex-col gap-4\">\n \n <div style=\"background: var(--muted); border-color: var(--border)\" class=\"p-4 rounded border\">\n <div class=\"flex items-center justify-between mb-3\">\n <div class=\"flex items-center gap-2\">\n <span class=\"font-medium\">Storybook</span>\n documentation\n </div>\n \n \n Open\n \n \n </div>\n <p class=\"text-sm text-muted mb-3\">Component documentation and playground</p>\n \n <div class=\"text-xs text-muted\">\n URL: <code>https://localhost/storybook/</code>\n Host from server config: <code>localhost</code>\n </div>\n \n \n </div>\n \n <div style=\"background: var(--muted); border-color: var(--border)\" class=\"p-4 rounded border\">\n <div class=\"flex items-center justify-between mb-3\">\n <div class=\"flex items-center gap-2\">\n <span class=\"font-medium\">Figma</span>\n design\n </div>\n \n \n Open\n \n \n </div>\n <p class=\"text-sm text-muted mb-3\">Design file integration and token extraction</p>\n \n \n <div class=\"text-xs text-muted\">\n Token status: Check connection above\n </div>\n \n </div>\n \n </div>\n \n \n\n \n \n \n Companion Services\n Discovered and configured services\n \n \n <div class=\"grid grid-cols-3 gap-4\">\n \n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <div class=\"flex items-center justify-between mb-2\">\n <h4 class=\"font-medium\">Storybook</h4>\n <span class=\"status-dot\"></span>\n </div>\n <p class=\"text-sm text-muted mb-2\">\n Not detected\n </p>\n \n </div>\n \n \n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <div class=\"flex items-center justify-between mb-2\">\n <h4 class=\"font-medium\">Vite Dev Server</h4>\n <span class=\"status-dot\"></span>\n </div>\n <p class=\"text-sm text-muted mb-2\">\n Not detected\n </p>\n \n </div>\n \n \n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <div class=\"flex items-center justify-between mb-2\">\n <h4 class=\"font-medium\">Next.js</h4>\n <span class=\"status-dot\"></span>\n </div>\n <p class=\"text-sm text-muted mb-2\">\n Not detected\n </p>\n \n </div>\n \n </div>\n <div class=\"mt-4\">\n \n Refresh Services\n \n </div>\n \n \n\n \n \n \n Features\n Enable or disable DSS features\n \n \n <div class=\"flex flex-col gap-3\">\n \n <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n <div>\n <div class=\"font-medium\">Visual QA</div>\n <div class=\"text-sm text-muted\">Compare Figma designs with implementation</div>\n </div>\n \n Enabled\n \n </div>\n \n \n <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n <div>\n <div class=\"font-medium\">Token Sync</div>\n <div class=\"text-sm text-muted\">Sync design tokens to code</div>\n </div>\n \n Enabled\n \n </div>\n \n \n <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n <div>\n <div class=\"font-medium\">Code Generation</div>\n <div class=\"text-sm text-muted\">Generate component code from Figma</div>\n </div>\n \n Enabled\n \n </div>\n \n \n <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n <div>\n <div class=\"font-medium\">AI Advisor</div>\n <div class=\"text-sm text-muted\">Get AI suggestions for design system improvements</div>\n </div>\n \n Enabled\n \n </div>\n \n </div>\n \n \n\n \n \n \n Appearance\n Customize the interface\n \n \n <div class=\"flex items-center justify-between\">\n <span>Dark Mode</span>\n \n Toggle Theme\n \n </div>\n \n \n\n \n \n \n Output Configuration\n Token and component generation settings\n \n \n <div class=\"grid grid-cols-2 gap-4\">\n \n \n </div>\n \n \n\n \n \n \n \u26a0\ufe0f Danger Zone\n Irreversible operations - use with caution\n \n \n <div class=\"flex flex-col gap-4\">\n <div>\n <h4 class=\"font-medium mb-2\">Reset DSS to Fresh State</h4>\n <p class=\"text-sm text-muted mb-3\">\n This will delete all user-created themes, cached data, and project databases.\n The DSS structure and default themes will be preserved.\n </p>\n \n Reset DSS\n \n </div>\n </div>\n \n \n\n \n \n \n API Status\n \n \n <div class=\"flex flex-col gap-2 text-sm\">\n <div class=\"flex justify-between\">\n <span>API Mode:</span>\n \n Live\n \n </div>\n <div class=\"flex justify-between\">\n <span>Base URL:</span>\n <span class=\"text-muted\">/api</span>\n </div>\n </div>\n \n \n </div>\n </div>\n\n <!-- Right Sidebar - AI Chat -->\n <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n <ds-ai-chat></ds-ai-chat>\n </aside>\n <button class=\"sidebar-toggle collapsed\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"true\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 18l6-6-6-6\"></path>\n </svg>\n </button>\n </main>\n </div>\n\n <!-- Load Components -->\n <script type=\"module\">\n // Import theme manager first (loads saved theme from cookie)\n import themeManager from '/admin-ui/js/core/theme.js';\n\n // Import all components\n import '/admin-ui/js/components/ds-button.js';\n import '/admin-ui/js/components/ds-card.js';\n import '/admin-ui/js/components/ds-input.js';\n import '/admin-ui/js/components/ds-badge.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import and initialize app\n import app from '/admin-ui/js/core/app.js';\n\n // Initialize when DOM is ready\n document.addEventListener('DOMContentLoaded', () => {\n app.init();\n\n // Setup theme toggle button\n const themeToggle = document.getElementById('theme-toggle');\n if (themeToggle) {\n themeToggle.addEventListener('click', () => {\n themeManager.toggle();\n });\n }\n\n // Setup team context selector\n const teamSelect = document.getElementById('team-context-select');\n const updateHelpSections = (team) => {\n document.querySelectorAll('.help-section').forEach(section => {\n const sectionTeam = section.dataset.team;\n section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n });\n };\n\n if (teamSelect) {\n const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n teamSelect.value = savedTeam;\n updateHelpSections(savedTeam);\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n window.dispatchEvent(new CustomEvent('team-context-changed', {\n detail: { team }\n }));\n });\n }\n\n // Setup AI sidebar toggle\n const sidebarToggle = document.getElementById('sidebar-toggle');\n const aiSidebar = document.getElementById('ai-sidebar');\n if (sidebarToggle && aiSidebar) {\n // Restore saved state\n const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n if (sidebarCollapsed) {\n aiSidebar.classList.add('collapsed');\n sidebarToggle.classList.add('collapsed');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.classList.toggle('collapsed', isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n });\n </script>\n\n\n<div id=\"notifications\" class=\"notification-container\">\n <div class=\"notification notification--error\">\n Server offline. Start DSS API first.\n </div>\n </div></body></html>",
|
|
"viewport": {
|
|
"width": 1244,
|
|
"height": 958,
|
|
"devicePixelRatio": 2
|
|
},
|
|
"title": "Design System Server"
|
|
}
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032771806,
|
|
"relativeTime": 31058,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 204.7000000178814,
|
|
"transferSize": 581,
|
|
"encodedBodySize": 281,
|
|
"decodedBodySize": 281
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032772317,
|
|
"relativeTime": 31569,
|
|
"level": "debug",
|
|
"category": "console",
|
|
"message": "[BrowserLogger] Synced 20 logs to server",
|
|
"data": {
|
|
"args": [
|
|
"[BrowserLogger] Synced 20 logs to server"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032772369,
|
|
"relativeTime": 31621,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/browser-logs",
|
|
"initiatorType": "fetch",
|
|
"duration": 721.1999999880791,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
}
|
|
],
|
|
"diagnostic": {
|
|
"sessionId": "session-1765032740748-n82tkqspp",
|
|
"uptime": 60842,
|
|
"totalLogs": 22,
|
|
"errorCount": 0,
|
|
"warnCount": 0,
|
|
"networkRequests": 6,
|
|
"memory": {
|
|
"usedJSHeapSize": 194703460,
|
|
"jsHeapSizeLimit": 4294967296,
|
|
"usagePercent": "4.53"
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36",
|
|
"recentErrors": [],
|
|
"recentNetworkRequests": [
|
|
{
|
|
"timestamp": 1765032772369,
|
|
"relativeTime": 31621,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/browser-logs",
|
|
"initiatorType": "fetch",
|
|
"duration": 721.1999999880791,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032771806,
|
|
"relativeTime": 31058,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 204.7000000178814,
|
|
"transferSize": 581,
|
|
"encodedBodySize": 281,
|
|
"decodedBodySize": 281
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032747185,
|
|
"relativeTime": 6437,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/browser-logs",
|
|
"initiatorType": "fetch",
|
|
"duration": 537.2999999821186,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741308,
|
|
"relativeTime": 560,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 193.40000000596046,
|
|
"transferSize": 321,
|
|
"encodedBodySize": 21,
|
|
"decodedBodySize": 21
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
},
|
|
{
|
|
"timestamp": 1765032741063,
|
|
"relativeTime": 315,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/config",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/config",
|
|
"initiatorType": "fetch",
|
|
"duration": 307.30000001192093,
|
|
"transferSize": 361,
|
|
"encodedBodySize": 61,
|
|
"decodedBodySize": 61
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
|
|
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
|
|
}
|
|
]
|
|
}
|
|
} |