bruno/dss
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
3e4295457d0dcec044e825d4c5b8ff1c9e0525c4
dss/.dss/browser-logs/session-1765116329261-m4qapuckd.json
Digital Production Factory 276ed71f31 Initial commit: Clean DSS implementation 
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved
2025-12-09 18:45:48 -03:00

1294 lines
285 KiB
JSON
Raw Blame History

{
"sessionId": "session-1765116329261-m4qapuckd",
"exportedAt": "2025-12-07T14:08:00.118Z",
"logs": [
{
"timestamp": 1765116329262,
"relativeTime": 1,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [App] Initializing application... color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [App] Initializing application...",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329271,
"relativeTime": 10,
"level": "metric",
"category": "performance",
"message": "Page load completed",
"data": {
"domContentLoaded": 0.699999988079071,
"loadComplete": 0.09999999403953552,
"totalTime": 2319.199999988079,
"dnsLookup": 0,
"tcpConnection": 0,
"requestTime": 216,
"responseTime": 1.699999988079071,
"renderTime": null
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329283,
"relativeTime": 22,
"level": "log",
"category": "console",
"message": "[DssDB] Database ready",
"data": {
"args": [
"[DssDB] Database ready"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329455,
"relativeTime": 194,
"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": 193.59999999403954,
"transferSize": 590,
"encodedBodySize": 290,
"decodedBodySize": 290
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "[ConfigLoader] Configuration loaded successfully [object Object]",
"data": {
"args": [
"[ConfigLoader] Configuration loaded successfully",
{
"dssHost": "localhost",
"dssPort": "3456",
"storybookPort": 6006
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [App] Server configuration loaded color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [App] Server configuration loaded",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0 color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing... color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing...",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [App] Plugins initialized color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [App] Plugins initialized",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329456,
"relativeTime": 195,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [App] Messaging system initialized color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [App] Messaging system initialized",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329459,
"relativeTime": 198,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [App] Router initialized with 12 routes color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [App] Router initialized with 12 routes",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329459,
"relativeTime": 198,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329459,
"relativeTime": 198,
"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": 192.30000001192093,
"transferSize": 361,
"encodedBodySize": 61,
"decodedBodySize": 61
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116329479,
"relativeTime": 218,
"level": "warn",
"category": "console",
"message": "SSE connection unavailable, using local-only mode",
"data": {
"args": [
"SSE connection unavailable, using local-only mode"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116330162,
"relativeTime": 901,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 700.8000000119209,
"transferSize": 581,
"encodedBodySize": 281,
"decodedBodySize": 281
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116330357,
"relativeTime": 1096,
"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": 192.80000001192093,
"transferSize": 361,
"encodedBodySize": 61,
"decodedBodySize": 61
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116330361,
"relativeTime": 1100,
"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": 196.7000000178814,
"transferSize": 475,
"encodedBodySize": 175,
"decodedBodySize": 175
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116330556,
"relativeTime": 1295,
"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": 392.09999999403954,
"transferSize": 848,
"encodedBodySize": 548,
"decodedBodySize": 548
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116330905,
"relativeTime": 1644,
"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": 347,
"transferSize": 835,
"encodedBodySize": 535,
"decodedBodySize": 535
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116331106,
"relativeTime": 1845,
"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": 197.90000000596046,
"transferSize": 433,
"encodedBodySize": 133,
"decodedBodySize": 133
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116331305,
"relativeTime": 2044,
"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": 198.7999999821186,
"transferSize": 3771,
"encodedBodySize": 3471,
"decodedBodySize": 3471
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116331496,
"relativeTime": 2235,
"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",
"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": 1765116331498,
"relativeTime": 2237,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [App] Application initialized successfully color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [App] Application initialized successfully",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116331499,
"relativeTime": 2238,
"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": 190.80000001192093,
"transferSize": 590,
"encodedBodySize": 290,
"decodedBodySize": 290
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116331699,
"relativeTime": 2438,
"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": 199,
"transferSize": 668,
"encodedBodySize": 368,
"decodedBodySize": 368
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116334850,
"relativeTime": 5589,
"level": "debug",
"category": "console",
"message": "[BrowserLogger] Synced 26 logs to server",
"data": {
"args": [
"[BrowserLogger] Synced 26 logs to server"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116334901,
"relativeTime": 5640,
"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": 582.5999999940395,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
},
{
"timestamp": 1765116346248,
"relativeTime": 16987,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116346253,
"relativeTime": 16992,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116346260,
"relativeTime": 16999,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116346262,
"relativeTime": 17001,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116346266,
"relativeTime": 17005,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#services"
},
"snapshot": {
"timestamp": 1765116346266,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2 active\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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 <div class=\"flex items-center justify-between\">\n <div>\n <h1>Services</h1>\n <p class=\"text-muted\">8 tools available</p>\n </div>\n <input style=\"width: 200px;\" class=\"input\" placeholder=\"Search...\" id=\"toolSearch\" type=\"text\">\n </div>\n </div>\n\n <div class=\"tools-container\" id=\"toolsContainer\">\n \n <div data-category=\"Figma\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Figma</span>\n <span class=\"tools-category__count\">1</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Figma\" data-tool=\"extract_tokens\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83c\udfa8</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">extract tokens</div>\n <div class=\"tool-item__desc\">Extract design tokens from Figma file</div>\n </div>\n <span class=\"tool-item__params\">2p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n </div>\n </div>\n \n <div data-category=\"Ingestion\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Ingestion</span>\n <span class=\"tools-category__count\">2</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"export_tokens\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udce4</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">export tokens</div>\n <div class=\"tool-item__desc\">Export tokens to specified format</div>\n </div>\n <span class=\"tool-item__params\">2p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"validate_tokens\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\u2713</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">validate tokens</div>\n <div class=\"tool-item__desc\">Validate token structure and values</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n </div>\n </div>\n \n <div data-category=\"Analysis\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Analysis</span>\n <span class=\"tools-category__count\">4</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"discover_project\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udd0e</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">discover project</div>\n <div class=\"tool-item__desc\">Discover project structure and frameworks</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"find_style_patterns\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udcca</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">find style patterns</div>\n <div class=\"tool-item__desc\">Identify common style patterns</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"analyze_style_values\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udcc8</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">analyze style values</div>\n <div class=\"tool-item__desc\">Analyze style property values</div>\n </div>\n <span class=\"tool-item__params\">2p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"check_naming_consistency\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83c\udff7\ufe0f</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">check naming consistency</div>\n <div class=\"tool-item__desc\">Check component naming consistency</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n </div>\n </div>\n \n <div data-category=\"Activity\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Activity</span>\n <span class=\"tools-category__count\">1</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Activity\" data-tool=\"get_sync_history\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udcdc</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">get sync history</div>\n <div class=\"tool-item__desc\">Get token sync history</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116348318,
"relativeTime": 19057,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering chat page",
"color: #2196F3; font-weight: bold",
{
"historyLength": 0,
"model": "claude"
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"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": 1765116348322,
"relativeTime": 19061,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering chat page",
"color: #2196F3; font-weight: bold",
{
"historyLength": 0,
"model": "claude"
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"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": 1765116348330,
"relativeTime": 19069,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering chat page",
"color: #2196F3; font-weight: bold",
{
"historyLength": 0,
"model": "claude"
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"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": 1765116348331,
"relativeTime": 19070,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering chat page",
"color: #2196F3; font-weight: bold",
{
"historyLength": 0,
"model": "claude"
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"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": 1765116349262,
"relativeTime": 20001,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#chat"
},
"snapshot": {
"timestamp": 1765116349262,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1 active\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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 <div class=\"flex items-center justify-between\">\n <div>\n <h1>\ud83d\udcac AI Assistant</h1>\n <p class=\"text-muted\">Ask questions about your design system</p>\n </div>\n <div class=\"flex gap-2\">\n \n \ud83e\udd16 Claude\n \u2728 Gemini\n \n <button data-action=\"exportChat\" class=\"btn btn-outline btn-sm\">\n \ud83d\udce5 Export\n </button>\n <button data-action=\"clearChat\" class=\"btn btn-outline btn-sm\">\n \ud83d\uddd1\ufe0f Clear\n </button>\n </div>\n </div>\n </div>\n\n <div style=\"height: calc(100vh - 200px);\" class=\"card flex flex-col\">\n \n <div class=\"flex-1 overflow-y-auto p-4 space-y-4\" id=\"chatMessages\">\n \n <div class=\"text-center text-muted py-12\">\n <p class=\"text-lg mb-2\">\ud83d\udc4b Hi! I'm Claude</p>\n <p>Ask me anything about your design system, tokens, or code</p>\n </div>\n \n </div>\n\n \n <div class=\"border-t p-4\">\n \n <input class=\"input flex-1\" placeholder=\"Ask Claude something...\" id=\"chatInput\" type=\"text\">\n <button data-action=\"sendChatMessage\" class=\"btn btn-primary\" type=\"submit\">\n Send\n </button>\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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"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": 1765116358119,
"relativeTime": 28858,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#figma"
},
"snapshot": {
"timestamp": 1765116358118,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2 active\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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>Project Settings</h1>\n <p class=\"text-muted\">Configure your project and Figma integration</p>\n </div>\n\n <div class=\"grid grid-cols-2 gap-6 mt-6\">\n \n \n Project Details\n Describe your design system project\n \n \n \n \n \n \n Save Description\n \n \n \n\n \n \n Figma Connection\n Configure your Figma file\n \n \n \n <p class=\"text-xs text-muted mt-2\">Find this in your Figma URL: figma.com/file/<strong>[FILE_KEY]</strong>/...</p>\n \n \n \n Save &amp; Connect\n \n \n \n\n \n \n Sync Status\n \n \n <div class=\"flex flex-col gap-3\">\n <div class=\"flex justify-between items-center\">\n <span>Connection:</span>\n \n Not configured\n \n </div>\n <div class=\"flex justify-between items-center\">\n <span>Last Sync:</span>\n <span class=\"text-muted\">Never</span>\n </div>\n </div>\n \n \n </div>\n\n \n \n Available Tools\n Figma integration capabilities\n \n \n <div class=\"grid grid-cols-2 gap-4\">\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Extract Variables</h4>\n <p class=\"text-sm text-muted\">Pull design tokens from Figma variables</p>\n </div>\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Extract Components</h4>\n <p class=\"text-sm text-muted\">Get component definitions and variants</p>\n </div>\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Extract Styles</h4>\n <p class=\"text-sm text-muted\">Pull text, color, and effect styles</p>\n </div>\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Sync Tokens</h4>\n <p class=\"text-sm text-muted\">Sync tokens to CSS/SCSS/JSON files</p>\n </div>\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Visual Diff</h4>\n <p class=\"text-sm text-muted\">Compare visual changes between versions</p>\n </div>\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Validate Components</h4>\n <p class=\"text-sm text-muted\">Check components against naming rules</p>\n </div>\n <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n <h4 class=\"font-medium mb-1\">Generate Code</h4>\n <p class=\"text-sm text-muted\">Create component code from designs</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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
"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": 1765116360429,
"relativeTime": 31168,
"level": "debug",
"category": "console",
"message": "[BrowserLogger] Synced 39 logs to server",
"data": {
"args": [
"[BrowserLogger] Synced 39 logs to server"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
"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": 1765116360481,
"relativeTime": 31220,
"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": 1162.4000000059605,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
"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": 1765116361696,
"relativeTime": 32435,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 194.5,
"transferSize": 581,
"encodedBodySize": 281,
"decodedBodySize": 281
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
"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": 1765116368263,
"relativeTime": 39002,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#projects"
},
"snapshot": {
"timestamp": 1765116368263,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#projects",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\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 active\" 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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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>Projects</h1>\n <p class=\"text-muted\">Manage your design system projects</p>\n </div>\n\n <div class=\"flex justify-between items-center mt-6 mb-4\">\n \n \n New Project\n \n </div>\n\n \n\n \n <div class=\"grid grid-cols-2 gap-4\">\n \n \n \n test\n \n active\n \n \n \n <p class=\"text-sm mb-3\">a test project</p>\n <div class=\"flex flex-col gap-2 text-sm\">\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Figma Key:</span>\n <span class=\"font-mono text-xs\">figd_jRiYc6O6Uzt6PNP-TC4UkkVRn911Sx5clYK9HOtt</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Last Sync:</span>\n <span>Never</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-muted\">Created:</span>\n <span>6/12/2025</span>\n </div>\n </div>\n \n \n <div class=\"flex gap-2\">\n \n Open\n \n \n Sync Tokens\n \n \n Delete\n \n </div>\n \n \n \n </div>\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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#projects",
"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": 1765116369262,
"relativeTime": 40001,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#projects",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard"
},
"snapshot": {
"timestamp": 1765116369262,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\n <div class=\"nav-section__title\">Overview</div>\n <a class=\"nav-item active\" 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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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>UX Team Dashboard</h1>\n <p class=\"text-muted\">Design consistency &amp; token validation \u00b7 <strong class=\"text-primary\">test</strong></p>\n </div>\n\n \n <div class=\"grid grid-cols-4 gap-4 mt-6\">\n \n \n <div class=\"stat\">\n <div class=\"stat__label\">Figma Files</div>\n <div class=\"stat__value\">0</div>\n </div>\n \n \n\n \n \n <div class=\"stat\">\n <div class=\"stat__label\">Synced Files</div>\n <div class=\"stat__value\">0</div>\n </div>\n \n \n\n \n \n <div class=\"stat\">\n <div class=\"stat__label\">Pending Sync</div>\n <div class=\"stat__value\">0</div>\n </div>\n \n \n\n \n \n <div class=\"stat\">\n <div class=\"stat__label\">Design Tokens</div>\n <div class=\"stat__value\">0</div>\n </div>\n \n \n </div>\n\n \n <div class=\"mt-6\">\n \n \n \u2795 Add Figma File\n Configure Figma files for this project\n \n \n \n <div>\n File Name\n <input class=\"w-full p-2 border rounded mt-1\" placeholder=\"Design System Components\" name=\"file_name\" type=\"text\">\n </div>\n <div>\n Figma URL\n <input class=\"w-full p-2 border rounded mt-1\" placeholder=\"https://figma.com/file/...\" name=\"figma_url\" type=\"url\">\n </div>\n <div>\n File Key\n <input class=\"w-full p-2 border rounded mt-1\" placeholder=\"abc123xyz\" name=\"file_key\" type=\"text\">\n <p class=\"text-xs text-muted mt-1\">Extract from Figma URL: figma.com/file/<strong>FILE_KEY</strong>/...</p>\n </div>\n \n Add Figma File\n \n \n \n \n </div>\n\n \n <div class=\"mt-6\">\n \n \n Figma Files (0)\n Manage Figma files for this project\n \n \n \n <p class=\"text-muted text-sm text-center py-8\">\n No Figma files configured yet. Add your first file above! \ud83d\udc46\n </p>\n \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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard",
"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": 1765116373109,
"relativeTime": 43848,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116373117,
"relativeTime": 43856,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116373124,
"relativeTime": 43863,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116373127,
"relativeTime": 43866,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering services page",
"color: #2196F3; font-weight: bold",
{
"toolCount": 8,
"teamContext": "ux",
"categories": [
"Projects",
"Figma",
"Ingestion",
"Analysis",
"Storybook",
"Activity"
]
}
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116373263,
"relativeTime": 44002,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#services"
},
"snapshot": {
"timestamp": 1765116373262,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2 active\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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 <div class=\"flex items-center justify-between\">\n <div>\n <h1>Services</h1>\n <p class=\"text-muted\">8 tools available</p>\n </div>\n <input style=\"width: 200px;\" class=\"input\" placeholder=\"Search...\" id=\"toolSearch\" type=\"text\">\n </div>\n </div>\n\n <div class=\"tools-container\" id=\"toolsContainer\">\n \n <div data-category=\"Figma\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Figma</span>\n <span class=\"tools-category__count\">1</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Figma\" data-tool=\"extract_tokens\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83c\udfa8</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">extract tokens</div>\n <div class=\"tool-item__desc\">Extract design tokens from Figma file</div>\n </div>\n <span class=\"tool-item__params\">2p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n </div>\n </div>\n \n <div data-category=\"Ingestion\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Ingestion</span>\n <span class=\"tools-category__count\">2</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"export_tokens\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udce4</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">export tokens</div>\n <div class=\"tool-item__desc\">Export tokens to specified format</div>\n </div>\n <span class=\"tool-item__params\">2p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"validate_tokens\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\u2713</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">validate tokens</div>\n <div class=\"tool-item__desc\">Validate token structure and values</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n </div>\n </div>\n \n <div data-category=\"Analysis\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Analysis</span>\n <span class=\"tools-category__count\">4</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"discover_project\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udd0e</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">discover project</div>\n <div class=\"tool-item__desc\">Discover project structure and frameworks</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"find_style_patterns\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udcca</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">find style patterns</div>\n <div class=\"tool-item__desc\">Identify common style patterns</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"analyze_style_values\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udcc8</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">analyze style values</div>\n <div class=\"tool-item__desc\">Analyze style property values</div>\n </div>\n <span class=\"tool-item__params\">2p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"check_naming_consistency\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83c\udff7\ufe0f</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">check naming consistency</div>\n <div class=\"tool-item__desc\">Check component naming consistency</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\n \n </div>\n </div>\n \n <div data-category=\"Activity\" class=\"tools-category\">\n <div class=\"tools-category__header\">\n <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n <span class=\"tools-category__name\">Activity</span>\n <span class=\"tools-category__count\">1</span>\n </div>\n <div class=\"tools-category__list\">\n \n <div data-action=\"executeTool\" data-category=\"Activity\" data-tool=\"get_sync_history\" class=\"tool-item\">\n <span class=\"tool-item__icon\">\ud83d\udcdc</span>\n <div class=\"tool-item__info\">\n <div class=\"tool-item__name\">get sync history</div>\n <div class=\"tool-item__desc\">Get token sync history</div>\n </div>\n <span class=\"tool-item__params\">1p</span>\n <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n </div>\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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"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": 1765116373841,
"relativeTime": 44580,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering quick wins page",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116373843,
"relativeTime": 44582,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering quick wins page",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116373846,
"relativeTime": 44585,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering quick wins page",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116373847,
"relativeTime": 44586,
"level": "log",
"category": "console",
"message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
"data": {
"args": [
"%c\ud83d\udcad [UI] Rendering quick wins page",
"color: #2196F3; font-weight: bold"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116374263,
"relativeTime": 45002,
"level": "info",
"category": "snapshot",
"message": "State Capture (navigation)",
"data": {
"trigger": "navigation",
"details": {
"from": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
"to": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins"
},
"snapshot": {
"timestamp": 1765116374262,
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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 <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.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: calc(100vh - 57px);\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: 57px;\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 /* AI Toggle button active state in header */\n #sidebar-toggle[aria-expanded=\"false\"] {\n opacity: 0.6;\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\" id=\"main-nav\" aria-label=\"Main navigation\">\n <!-- Overview -->\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\n <!-- Tools -->\n <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n Tools\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Analysis\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n <a class=\"nav-item nav-item--level-2 active\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n </div>\n </details>\n <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n </div>\n </details>\n\n <!-- Design System -->\n <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n <summary>\n <div class=\"nav-item\" tabindex=\"0\">\n <svg class=\"nav-item__icon\" 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 Design System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Foundations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n </div>\n </details>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Integrations\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n </div>\n </details>\n </div>\n </details>\n\n <!-- System -->\n <details class=\"nav-group\" id=\"nav-group-system\">\n <summary>\n <div class=\"nav-item\" 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=\"3\"></circle>\n <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n </svg>\n System\n <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-group__content\">\n <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n <summary>\n <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n Administration\n <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </div>\n </summary>\n <div class=\"nav-sub-group__content\">\n <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n </div>\n </details>\n </div>\n </details>\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 &amp; 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 data-variant=\"outline\">v1.0.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 data-variant=\"ghost\" data-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 <div class=\"notification-toggle-container\" style=\"position: relative;\">\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" 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 <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n <ds-notification-center></ds-notification-center>\n </div>\n <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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 </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>\u26a1 Quick Wins</h1>\n <p class=\"text-muted\">Actionable improvements to empower your team</p>\n </div>\n\n <div class=\"card p-4 mb-6\">\n <div class=\"flex gap-4\">\n <input class=\"input flex-1\" value=\".\" placeholder=\"Project path (default: .)\" id=\"projectPath\" type=\"text\">\n <button data-action=\"loadQuickWins\" class=\"btn btn-primary\">\n \ud83d\udd0d Analyze Project\n </button>\n </div>\n </div>\n\n <div id=\"quickWinsContainer\">\n <div class=\"text-center text-muted py-8\">\n <p>Click \"Analyze Project\" to discover quick wins</p>\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 </main>\n </div>\n\n <!-- Toast Provider for notifications -->\n <ds-toast-provider></ds-toast-provider>\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/components/ds-action-bar.js';\n import '/admin-ui/js/components/ds-toast.js';\n import '/admin-ui/js/components/ds-toast-provider.js';\n import '/admin-ui/js/components/ds-notification-center.js';\n import '/admin-ui/js/components/ds-workflow.js';\n import '/admin-ui/js/core/ai.js';\n\n // Import stores and services\n import contextStore from '/admin-ui/js/stores/context-store.js';\n import notificationService from '/admin-ui/js/services/notification-service.js';\n\n // Import browser logger for debugging\n import '/admin-ui/js/core/browser-logger.js';\n\n // Import navigation manager\n import NavigationManager from '/admin-ui/js/core/navigation.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 // Initialize navigation manager\n new NavigationManager(document.querySelector('.sidebar__nav'));\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 contextStore.setContext({ team: savedTeam });\n\n teamSelect.addEventListener('change', (e) => {\n const team = e.target.value;\n localStorage.setItem('dss_team_context', team);\n updateHelpSections(team);\n contextStore.setContext({ 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.setAttribute('aria-expanded', 'false');\n }\n\n sidebarToggle.addEventListener('click', () => {\n const isCollapsed = aiSidebar.classList.toggle('collapsed');\n sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n });\n }\n\n // Setup Notification Center toggle\n const notificationToggle = document.getElementById('notification-toggle');\n const notificationCenter = document.querySelector('ds-notification-center');\n const notificationIndicator = document.getElementById('notification-indicator');\n\n if (notificationToggle && notificationCenter) {\n notificationToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n const isOpen = notificationCenter.hasAttribute('open');\n if (isOpen) {\n notificationCenter.removeAttribute('open');\n } else {\n notificationCenter.setAttribute('open', '');\n }\n });\n\n // Close when clicking outside\n document.addEventListener('click', (e) => {\n if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n notificationCenter.removeAttribute('open');\n }\n });\n\n // Update unread indicator\n notificationService.addEventListener('unread-count-changed', (e) => {\n const { count } = e.detail;\n if (notificationIndicator) {\n notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n }\n });\n\n // Handle notification actions\n notificationCenter.addEventListener('notification-action', (e) => {\n const { event, payload } = e.detail;\n console.log('Notification action:', event, payload);\n // Handle navigation or other actions based on event type\n if (event.startsWith('navigate:')) {\n const page = event.replace('navigate:', '');\n window.location.hash = page;\n }\n });\n }\n\n // Listen for \"Ask AI\" events from anywhere in the app\n window.addEventListener('dss-ask-ai', (e) => {\n const { prompt, openSidebar } = e.detail;\n if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n aiSidebar.classList.remove('collapsed');\n sidebarToggle?.setAttribute('aria-expanded', 'true');\n localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n }\n // The ds-ai-chat component should handle the prompt\n const aiChat = document.querySelector('ds-ai-chat');\n if (aiChat && typeof aiChat.setInput === 'function') {\n aiChat.setInput(prompt);\n }\n });\n\n // Update context store on page navigation\n window.addEventListener('hashchange', () => {\n const page = window.location.hash.substring(1) || 'dashboard';\n contextStore.setContext({ page });\n });\n // Set initial page\n contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n });\n </script>\n\n\n</body></html>",
"viewport": {
"width": 1403,
"height": 958,
"devicePixelRatio": 2
},
"title": "Design System Server"
}
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116391482,
"relativeTime": 62221,
"level": "debug",
"category": "console",
"message": "[BrowserLogger] Synced 54 logs to server",
"data": {
"args": [
"[BrowserLogger] Synced 54 logs to server"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116391533,
"relativeTime": 62272,
"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": 1356,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116391700,
"relativeTime": 62439,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 198.19999998807907,
"transferSize": 582,
"encodedBodySize": 282,
"decodedBodySize": 282
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116421469,
"relativeTime": 92208,
"level": "debug",
"category": "console",
"message": "[BrowserLogger] Synced 57 logs to server",
"data": {
"args": [
"[BrowserLogger] Synced 57 logs to server"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116421521,
"relativeTime": 92260,
"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": 1343.7999999821186,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116422315,
"relativeTime": 93054,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 195,
"transferSize": 582,
"encodedBodySize": 282,
"decodedBodySize": 282
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116451462,
"relativeTime": 122201,
"level": "debug",
"category": "console",
"message": "[BrowserLogger] Synced 60 logs to server",
"data": {
"args": [
"[BrowserLogger] Synced 60 logs to server"
]
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116451514,
"relativeTime": 122253,
"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": 1336,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116452324,
"relativeTime": 123063,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 203.7000000178814,
"transferSize": 582,
"encodedBodySize": 282,
"decodedBodySize": 282
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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-1765116329261-m4qapuckd",
"uptime": 150857,
"totalLogs": 63,
"errorCount": 0,
"warnCount": 1,
"networkRequests": 20,
"memory": {
"usedJSHeapSize": 7603738,
"jsHeapSizeLimit": 4294967296,
"usagePercent": "0.18"
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116452324,
"relativeTime": 123063,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 203.7000000178814,
"transferSize": 582,
"encodedBodySize": 282,
"decodedBodySize": 282
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116451514,
"relativeTime": 122253,
"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": 1336,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116422315,
"relativeTime": 93054,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 195,
"transferSize": 582,
"encodedBodySize": 282,
"decodedBodySize": 282
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116421521,
"relativeTime": 92260,
"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": 1343.7999999821186,
"transferSize": 442,
"encodedBodySize": 142,
"decodedBodySize": 142
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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": 1765116391700,
"relativeTime": 62439,
"level": "network",
"category": "fetch",
"message": "FETCH https://dss.overbits.luz.uy/health",
"data": {
"url": "https://dss.overbits.luz.uy/health",
"initiatorType": "fetch",
"duration": 198.19999998807907,
"transferSize": 582,
"encodedBodySize": 282,
"decodedBodySize": 282
},
"url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
"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"
}
]
}
}
Reference in New Issue View Git Blame Copy Permalink