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
812 lines
149 KiB
JSON
812 lines
149 KiB
JSON
{
|
|
"sessionId": "session-1765033676969-46h7j01a7",
|
|
"exportedAt": "2025-12-06T15:09:27.882Z",
|
|
"logs": [
|
|
{
|
|
"timestamp": 1765033676969,
|
|
"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#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": 1765033676975,
|
|
"relativeTime": 6,
|
|
"level": "metric",
|
|
"category": "performance",
|
|
"message": "Page load completed",
|
|
"data": {
|
|
"domContentLoaded": 0.29999998211860657,
|
|
"loadComplete": 0,
|
|
"totalTime": 237,
|
|
"dnsLookup": 0,
|
|
"tcpConnection": 0,
|
|
"requestTime": 191.59999999403954,
|
|
"responseTime": 0.800000011920929,
|
|
"renderTime": null
|
|
},
|
|
"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": 1765033677274,
|
|
"relativeTime": 305,
|
|
"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": 304.2999999821186,
|
|
"transferSize": 527,
|
|
"encodedBodySize": 227,
|
|
"decodedBodySize": 227
|
|
},
|
|
"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": 1765033677274,
|
|
"relativeTime": 305,
|
|
"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": 301.80000001192093,
|
|
"transferSize": 371,
|
|
"encodedBodySize": 71,
|
|
"decodedBodySize": 71
|
|
},
|
|
"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": 1765033677274,
|
|
"relativeTime": 305,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "[ConfigLoader] Configuration loaded successfully [object Object]",
|
|
"data": {
|
|
"args": [
|
|
"[ConfigLoader] Configuration loaded successfully",
|
|
{
|
|
"dssHost": "dss.overbits.luz.uy",
|
|
"dssPort": "3456",
|
|
"storybookPort": 6006
|
|
}
|
|
]
|
|
},
|
|
"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": 1765033677275,
|
|
"relativeTime": 306,
|
|
"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#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": 1765033677275,
|
|
"relativeTime": 306,
|
|
"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#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": 1765033677275,
|
|
"relativeTime": 306,
|
|
"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#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": 1765033677275,
|
|
"relativeTime": 306,
|
|
"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#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": 1765033677275,
|
|
"relativeTime": 306,
|
|
"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#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": 1765033677276,
|
|
"relativeTime": 307,
|
|
"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#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": 1765033677280,
|
|
"relativeTime": 311,
|
|
"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#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": 1765033677280,
|
|
"relativeTime": 311,
|
|
"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#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": 1765033677474,
|
|
"relativeTime": 505,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 192.19999998807907,
|
|
"transferSize": 582,
|
|
"encodedBodySize": 282,
|
|
"decodedBodySize": 282
|
|
},
|
|
"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": 1765033677668,
|
|
"relativeTime": 699,
|
|
"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": 190.2999999821186,
|
|
"transferSize": 371,
|
|
"encodedBodySize": 71,
|
|
"decodedBodySize": 71
|
|
},
|
|
"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": 1765033677670,
|
|
"relativeTime": 701,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/config/figma",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/config/figma",
|
|
"initiatorType": "fetch",
|
|
"duration": 193.90000000596046,
|
|
"transferSize": 475,
|
|
"encodedBodySize": 175,
|
|
"decodedBodySize": 175
|
|
},
|
|
"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": 1765033677763,
|
|
"relativeTime": 794,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/services",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/services",
|
|
"initiatorType": "fetch",
|
|
"duration": 284.5,
|
|
"transferSize": 848,
|
|
"encodedBodySize": 548,
|
|
"decodedBodySize": 548
|
|
},
|
|
"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": 1765033678121,
|
|
"relativeTime": 1152,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/discovery/scan",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/discovery/scan",
|
|
"initiatorType": "fetch",
|
|
"duration": 356.40000000596046,
|
|
"transferSize": 834,
|
|
"encodedBodySize": 534,
|
|
"decodedBodySize": 534
|
|
},
|
|
"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": 1765033678325,
|
|
"relativeTime": 1356,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/discovery/stats",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/discovery/stats",
|
|
"initiatorType": "fetch",
|
|
"duration": 201.10000002384186,
|
|
"transferSize": 433,
|
|
"encodedBodySize": 133,
|
|
"decodedBodySize": 133
|
|
},
|
|
"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": 1765033678525,
|
|
"relativeTime": 1556,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/discovery/activity",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/discovery/activity",
|
|
"initiatorType": "fetch",
|
|
"duration": 197.5,
|
|
"transferSize": 3740,
|
|
"encodedBodySize": 3440,
|
|
"decodedBodySize": 3440
|
|
},
|
|
"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": 1765033678721,
|
|
"relativeTime": 1752,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "%c\ud83d\udcad [App] Loading dashboard data color: #2196F3; font-weight: bold [object Object]",
|
|
"data": {
|
|
"args": [
|
|
"%c\ud83d\udcad [App] Loading dashboard data",
|
|
"color: #2196F3; font-weight: bold",
|
|
{
|
|
"projectId": "proj-1764991776412"
|
|
}
|
|
]
|
|
},
|
|
"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": 1765033678728,
|
|
"relativeTime": 1759,
|
|
"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#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": 1765033678732,
|
|
"relativeTime": 1763,
|
|
"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": 192.2999999821186,
|
|
"transferSize": 527,
|
|
"encodedBodySize": 227,
|
|
"decodedBodySize": 227
|
|
},
|
|
"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": 1765033678925,
|
|
"relativeTime": 1956,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
|
|
"initiatorType": "fetch",
|
|
"duration": 197.90000000596046,
|
|
"transferSize": 668,
|
|
"encodedBodySize": 368,
|
|
"decodedBodySize": 368
|
|
},
|
|
"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": 1765033682674,
|
|
"relativeTime": 5705,
|
|
"level": "debug",
|
|
"category": "console",
|
|
"message": "[BrowserLogger] Synced 24 logs to server",
|
|
"data": {
|
|
"args": [
|
|
"[BrowserLogger] Synced 24 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": 1765033682726,
|
|
"relativeTime": 5757,
|
|
"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": 702.5999999940395,
|
|
"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": 1765033687971,
|
|
"relativeTime": 11002,
|
|
"level": "info",
|
|
"category": "snapshot",
|
|
"message": "Navigation detected",
|
|
"data": {
|
|
"trigger": "navigation",
|
|
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
|
|
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
|
|
"snapshot": {
|
|
"timestamp": 1765033687971,
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
|
|
"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://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/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 active\" 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\" 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 <div class=\"project-selector\">\n <svg class=\"project-selector__icon\">\n \n \n \n </svg>\n <span class=\"project-selector__label\">Project:</span>\n \n \n \n test\n \n \n \n </div>\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>Plugins</h1>\n <p class=\"text-muted\">1 of 1 plugins enabled</p>\n </div>\n\n <div class=\"plugins-grid\">\n \n <div data-plugin-id=\"claude-ai\" class=\"plugin-card enabled\">\n <div class=\"plugin-card__header\">\n <div class=\"plugin-card__icon\">\ud83e\udd16</div>\n <div class=\"plugin-card__title\">\n <div class=\"plugin-card__name\">Claude AI Assistant</div>\n <div class=\"plugin-card__version\">v1.0.0</div>\n </div>\n <div data-plugin=\"claude-ai\" data-action=\"togglePlugin\" class=\"plugin-toggle enabled\">\n </div>\n </div>\n <div class=\"plugin-card__desc\">Enhanced Claude AI integration for design system workflows</div>\n \n <div class=\"plugin-card__settings\">\n \n <div class=\"plugin-setting\">\n <span class=\"plugin-setting__label\">Claude Model</span>\n \n \n Claude 3 Sonnet (Fast)\n \n Claude 3 Opus (Advanced)\n \n Claude 3 Haiku (Quick)\n \n \n </div>\n \n <div class=\"plugin-setting\">\n <span class=\"plugin-setting__label\">Auto-suggest improvements</span>\n <div data-type=\"boolean\" data-key=\"autoSuggest\" data-plugin=\"claude-ai\" data-action=\"setPluginSetting\" class=\"plugin-toggle enabled\">\n </div>\n </div>\n \n <div class=\"plugin-setting\">\n <span class=\"plugin-setting__label\">Context Depth</span>\n \n \n Minimal\n \n Standard\n \n Deep Analysis\n \n \n </div>\n \n </div>\n \n <div class=\"plugin-card__meta\">\n <span class=\"plugin-card__author\">by DSS Team</span>\n \n Enabled\n \n </div>\n </div>\n \n </div>\n\n \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</body></html>",
|
|
"viewport": {
|
|
"width": 1244,
|
|
"height": 958,
|
|
"devicePixelRatio": 2
|
|
},
|
|
"title": "Design System Server"
|
|
}
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
|
|
"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": 1765033689970,
|
|
"relativeTime": 13001,
|
|
"level": "info",
|
|
"category": "snapshot",
|
|
"message": "Navigation detected",
|
|
"data": {
|
|
"trigger": "navigation",
|
|
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
|
|
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"snapshot": {
|
|
"timestamp": 1765033689970,
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/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 active\" 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\" 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 <div class=\"project-selector\">\n <svg class=\"project-selector__icon\">\n \n \n \n </svg>\n <span class=\"project-selector__label\">Project:</span>\n \n \n \n test\n \n \n \n </div>\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>Audit Log</h1>\n <p class=\"text-muted\">History of all user actions and system events</p>\n </div>\n\n \n <div class=\"mt-6\">\n \n \n Filters\n \n \n <div class=\"grid grid-cols-4 gap-4\">\n <div>\n Category\n \n All Categories\n Design System\n Code\n Configuration\n Project\n Team\n Storybook\n \n </div>\n\n <div>\n Severity\n \n All Severities\n Info\n Warning\n Critical\n \n </div>\n\n <div>\n Start Date\n <input class=\"w-full mt-2 p-2 rounded border\" id=\"audit-start-date\" type=\"date\">\n </div>\n\n <div>\n End Date\n <input class=\"w-full mt-2 p-2 rounded border\" id=\"audit-end-date\" type=\"date\">\n </div>\n </div>\n\n <div class=\"flex gap-3 mt-4\">\n \n Apply Filters\n \n \n Clear Filters\n \n \n \ud83d\udce5 Export JSON\n \n \n \ud83d\udce5 Export CSV\n \n </div>\n \n \n </div>\n\n \n <div class=\"mt-6\">\n \n \n Activity History\n \n <span id=\"audit-total-count\">Loading...</span>\n \n \n \n <div id=\"audit-log-content\">\n <div class=\"text-center py-8 text-muted\">\n Loading audit log...\n </div>\n </div>\n\n \n <div style=\"display: none;\" id=\"audit-pagination\" class=\"flex justify-between items-center mt-6\">\n <div class=\"text-sm text-muted\">\n Showing <span id=\"audit-showing\"></span> of <span id=\"audit-total\"></span> entries\n </div>\n <div class=\"flex gap-2\">\n \n Previous\n \n \n Next\n \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</body></html>",
|
|
"viewport": {
|
|
"width": 1244,
|
|
"height": 958,
|
|
"devicePixelRatio": 2
|
|
},
|
|
"title": "Design System Server"
|
|
}
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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": 1765033690272,
|
|
"relativeTime": 13303,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"initiatorType": "fetch",
|
|
"duration": 195.90000000596046,
|
|
"transferSize": 740,
|
|
"encodedBodySize": 440,
|
|
"decodedBodySize": 440
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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": 1765033690470,
|
|
"relativeTime": 13501,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"initiatorType": "fetch",
|
|
"duration": 390.19999998807907,
|
|
"transferSize": 740,
|
|
"encodedBodySize": 440,
|
|
"decodedBodySize": 440
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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": 1765033690665,
|
|
"relativeTime": 13696,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"initiatorType": "fetch",
|
|
"duration": 587.5,
|
|
"transferSize": 740,
|
|
"encodedBodySize": 440,
|
|
"decodedBodySize": 440
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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": 1765033690866,
|
|
"relativeTime": 13897,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"initiatorType": "fetch",
|
|
"duration": 788.6000000238419,
|
|
"transferSize": 740,
|
|
"encodedBodySize": 440,
|
|
"decodedBodySize": 440
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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": 1765033698258,
|
|
"relativeTime": 21289,
|
|
"level": "log",
|
|
"category": "console",
|
|
"message": "Show audit details for: 50",
|
|
"data": {
|
|
"args": [
|
|
"Show audit details for:",
|
|
50
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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": 1765033699970,
|
|
"relativeTime": 23001,
|
|
"level": "info",
|
|
"category": "snapshot",
|
|
"message": "Navigation detected",
|
|
"data": {
|
|
"trigger": "navigation",
|
|
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
|
|
"snapshot": {
|
|
"timestamp": 1765033699970,
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
|
|
"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://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/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 active\" 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\" 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 <div class=\"project-selector\">\n <svg class=\"project-selector__icon\">\n \n \n \n </svg>\n <span class=\"project-selector__label\">Project:</span>\n \n \n \n test\n \n \n \n </div>\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>Team Management</h1>\n <p class=\"text-muted\">Manage teams and permissions</p>\n </div>\n\n <div class=\"flex gap-3 mt-6 mb-4\">\n \n </div>\n\n <div class=\"grid grid-cols-3 gap-4 mt-4\">\n \n \n Design System Core\n Active\n \n \n <div class=\"flex flex-col gap-2 text-sm\">\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Members:</span>\n <span>5</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Projects:</span>\n <span>3</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Your Role:</span>\n TEAM_LEAD\n </div>\n </div>\n \n \n View Details\n \n \n\n \n \n Product Team A\n Member\n \n \n <div class=\"flex flex-col gap-2 text-sm\">\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Members:</span>\n <span>8</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Projects:</span>\n <span>2</span>\n </div>\n </div>\n \n \n View Details\n \n \n </div>\n\n \n \n Role Permissions\n \n \n <div class=\"grid grid-cols-4 gap-4 text-sm\">\n <div>\n <h4 class=\"font-medium mb-2\">Super Admin</h4>\n <p class=\"text-muted\">Full system access</p>\n </div>\n <div>\n <h4 class=\"font-medium mb-2\">Team Lead</h4>\n <p class=\"text-muted\">Manage team, sync, generate</p>\n </div>\n <div>\n <h4 class=\"font-medium mb-2\">Developer</h4>\n <p class=\"text-muted\">Read, write, sync</p>\n </div>\n <div>\n <h4 class=\"font-medium mb-2\">Viewer</h4>\n <p class=\"text-muted\">Read-only access</p>\n </div>\n </div>\n \n \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</body></html>",
|
|
"viewport": {
|
|
"width": 1244,
|
|
"height": 958,
|
|
"devicePixelRatio": 2
|
|
},
|
|
"title": "Design System Server"
|
|
}
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
|
|
"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": 1765033703970,
|
|
"relativeTime": 27001,
|
|
"level": "info",
|
|
"category": "snapshot",
|
|
"message": "Navigation detected",
|
|
"data": {
|
|
"trigger": "navigation",
|
|
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
|
|
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"snapshot": {
|
|
"timestamp": 1765033703970,
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/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 active\" 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\" 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 <div class=\"project-selector\">\n <svg class=\"project-selector__icon\">\n \n \n \n </svg>\n <span class=\"project-selector__label\">Project:</span>\n \n \n \n test\n \n \n \n </div>\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>Documentation</h1>\n <p class=\"text-muted\">DSS usage guides for all teams</p>\n </div>\n\n <div class=\"docs-layout mt-6\">\n \n <div class=\"docs-nav__section\">\n <div class=\"docs-nav__title\">Getting Started</div>\n <a data-doc=\"overview\" class=\"docs-nav__link active\">Overview</a>\n <a data-doc=\"quickstart\" class=\"docs-nav__link\">Quick Start</a>\n <a data-doc=\"concepts\" class=\"docs-nav__link\">Key Concepts</a>\n </div>\n <div class=\"docs-nav__section\">\n <div class=\"docs-nav__title\">Team Guides</div>\n <a data-doc=\"ui-team\" class=\"docs-nav__link\">UI Team</a>\n <a data-doc=\"ux-team\" class=\"docs-nav__link\">UX Team</a>\n <a data-doc=\"qa-team\" class=\"docs-nav__link\">QA Team</a>\n </div>\n <div class=\"docs-nav__section\">\n <div class=\"docs-nav__title\">Features</div>\n <a data-doc=\"tokens\" class=\"docs-nav__link\">Design Tokens</a>\n <a data-doc=\"figma\" class=\"docs-nav__link\">Figma Integration</a>\n <a data-doc=\"components\" class=\"docs-nav__link\">Components</a>\n <a data-doc=\"ai-chat\" class=\"docs-nav__link\">AI Chat</a>\n </div>\n <div class=\"docs-nav__section\">\n <div class=\"docs-nav__title\">Reference</div>\n <a target=\"_blank\" href=\"/api/docs\" class=\"docs-nav__link\">API Docs \u2197</a>\n <a data-doc=\"cli\" class=\"docs-nav__link\">CLI Commands</a>\n <a data-doc=\"troubleshooting\" class=\"docs-nav__link\">Troubleshooting</a>\n </div>\n \n\n <div id=\"docs-content\" class=\"docs-content\">\n \n <h2>What is DSS?</h2>\n <p>Design System Server (DSS) is a platform that helps teams manage, sync, and evolve their design systems by connecting Figma designs to code.</p>\n\n <h3>Core Features</h3>\n <ul>\n <li><strong>Token Extraction</strong> \u2014 Pull design tokens from Figma variables</li>\n <li><strong>Token Sync</strong> \u2014 Generate CSS/JSON from Figma tokens</li>\n <li><strong>Component Analysis</strong> \u2014 Scan your codebase for components</li>\n <li><strong>Visual Diff</strong> \u2014 Detect changes between Figma versions</li>\n <li><strong>AI Assistant</strong> \u2014 Get help via the built-in chat</li>\n </ul>\n\n <h3>Architecture</h3>\n <ul>\n <li><strong>REST API</strong> \u2014 Port 3456 (python tools/api/server.py)</li>\n <li><strong>MCP Server</strong> \u2014 Port 3457 for AI tools</li>\n <li><strong>Admin UI</strong> \u2014 This dashboard</li>\n <li><strong>CLI</strong> \u2014 Command-line interface</li>\n </ul>\n \n </div>\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</body></html>",
|
|
"viewport": {
|
|
"width": 1244,
|
|
"height": 958,
|
|
"devicePixelRatio": 2
|
|
},
|
|
"title": "Design System Server"
|
|
}
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033709265,
|
|
"relativeTime": 32296,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 533.7999999821186,
|
|
"transferSize": 582,
|
|
"encodedBodySize": 282,
|
|
"decodedBodySize": 282
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033709433,
|
|
"relativeTime": 32464,
|
|
"level": "debug",
|
|
"category": "console",
|
|
"message": "[BrowserLogger] Synced 36 logs to server",
|
|
"data": {
|
|
"args": [
|
|
"[BrowserLogger] Synced 36 logs to server"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033709484,
|
|
"relativeTime": 32515,
|
|
"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": 2458.5999999940395,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033738622,
|
|
"relativeTime": 61653,
|
|
"level": "debug",
|
|
"category": "console",
|
|
"message": "[BrowserLogger] Synced 38 logs to server",
|
|
"data": {
|
|
"args": [
|
|
"[BrowserLogger] Synced 38 logs to server"
|
|
]
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033738674,
|
|
"relativeTime": 61705,
|
|
"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": 1028.2000000178814,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033739776,
|
|
"relativeTime": 62807,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 185,
|
|
"transferSize": 582,
|
|
"encodedBodySize": 282,
|
|
"decodedBodySize": 282
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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-1765033676969-46h7j01a7",
|
|
"uptime": 90913,
|
|
"totalLogs": 41,
|
|
"errorCount": 0,
|
|
"warnCount": 0,
|
|
"networkRequests": 20,
|
|
"memory": {
|
|
"usedJSHeapSize": 195706817,
|
|
"jsHeapSizeLimit": 4294967296,
|
|
"usagePercent": "4.56"
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033739776,
|
|
"relativeTime": 62807,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 185,
|
|
"transferSize": 582,
|
|
"encodedBodySize": 282,
|
|
"decodedBodySize": 282
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033738674,
|
|
"relativeTime": 61705,
|
|
"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": 1028.2000000178814,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033709484,
|
|
"relativeTime": 32515,
|
|
"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": 2458.5999999940395,
|
|
"transferSize": 443,
|
|
"encodedBodySize": 143,
|
|
"decodedBodySize": 143
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033709265,
|
|
"relativeTime": 32296,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/health",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/health",
|
|
"initiatorType": "fetch",
|
|
"duration": 533.7999999821186,
|
|
"transferSize": 582,
|
|
"encodedBodySize": 282,
|
|
"decodedBodySize": 282
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
|
|
"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": 1765033690866,
|
|
"relativeTime": 13897,
|
|
"level": "network",
|
|
"category": "fetch",
|
|
"message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"data": {
|
|
"url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
|
|
"initiatorType": "fetch",
|
|
"duration": 788.6000000238419,
|
|
"transferSize": 740,
|
|
"encodedBodySize": 440,
|
|
"decodedBodySize": 440
|
|
},
|
|
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
|
|
"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"
|
|
}
|
|
]
|
|
}
|
|
} |