{
  "sessionId": "session-1765150797184-pfltukfs2",
  "exportedAt": "2025-12-07T23:42:58.083Z",
  "logs": [
    {
      "timestamp": 1765150797185,
      "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": 1765150797189,
      "relativeTime": 5,
      "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": 1765150797602,
      "relativeTime": 418,
      "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": 414.69999998807907,
        "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": 1765150797603,
      "relativeTime": 419,
      "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": 1765150797603,
      "relativeTime": 419,
      "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": 1765150797603,
      "relativeTime": 419,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [ThemeLoader] Initializing DSS Theme Loader... color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [ThemeLoader] Initializing DSS Theme Loader...",
          "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": 1765150797604,
      "relativeTime": 420,
      "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": 415.7000000178814,
        "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": 1765150797605,
      "relativeTime": 421,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
        "initiatorType": "fetch",
        "duration": 1.0999999940395355,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150797606,
      "relativeTime": 422,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "initiatorType": "fetch",
        "duration": 0.7000000178813934,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150797607,
      "relativeTime": 423,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "initiatorType": "fetch",
        "duration": 0.5,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150797608,
      "relativeTime": 424,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [ThemeLoader] All CSS layers loaded successfully color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [ThemeLoader] All CSS layers loaded 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": 1765150797608,
      "relativeTime": 424,
      "level": "log",
      "category": "console",
      "message": "[DSS Notification] [object Object]",
      "data": {
        "args": [
          "[DSS Notification]",
          {
            "message": "Design system styles loaded successfully",
            "code": "S1001",
            "correlationId": "28dd6d05-9981-4247-9b60-9c3cd7f3288e",
            "metadata": {}
          }
        ]
      },
      "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": 1765150797608,
      "relativeTime": 424,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] DSS Theme Loader initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] DSS Theme Loader 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": 1765150797608,
      "relativeTime": 424,
      "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": 1765150797608,
      "relativeTime": 424,
      "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": 1765150797608,
      "relativeTime": 424,
      "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": 1765150797608,
      "relativeTime": 424,
      "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": 1765150797609,
      "relativeTime": 425,
      "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": 1765150797611,
      "relativeTime": 427,
      "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": 1765150797611,
      "relativeTime": 427,
      "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": 1765150797612,
      "relativeTime": 428,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "initiatorType": "fetch",
        "duration": 0.3999999761581421,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150797613,
      "relativeTime": 429,
      "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": 1765150797613,
      "relativeTime": 429,
      "level": "metric",
      "category": "performance",
      "message": "Page load completed",
      "data": {
        "domContentLoaded": 0.699999988079071,
        "loadComplete": 0.09999999403953552,
        "totalTime": 501.2999999821186,
        "dnsLookup": 0,
        "tcpConnection": 0,
        "requestTime": 0.7000000178813934,
        "responseTime": 0.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": 1765150797792,
      "relativeTime": 608,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 180.7000000178814,
        "transferSize": 583,
        "encodedBodySize": 283,
        "decodedBodySize": 283
      },
      "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": 1765150797986,
      "relativeTime": 802,
      "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.19999998807907,
        "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": 1765150797986,
      "relativeTime": 802,
      "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": 192.5,
        "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": 1765150798076,
      "relativeTime": 892,
      "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": 280,
        "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": 1765150798460,
      "relativeTime": 1276,
      "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": 381.7000000178814,
        "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": 1765150798651,
      "relativeTime": 1467,
      "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": 187.7000000178814,
        "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": 1765150798844,
      "relativeTime": 1660,
      "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": 190.5,
        "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": 1765150799035,
      "relativeTime": 1851,
      "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": 1765150799040,
      "relativeTime": 1856,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Landing page initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Landing page 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": 1765150799042,
      "relativeTime": 1858,
      "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": 1765150799049,
      "relativeTime": 1865,
      "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": 188.40000000596046,
        "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": 1765150799238,
      "relativeTime": 2054,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
        "initiatorType": "fetch",
        "duration": 197.19999998807907,
        "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": 1765150803215,
      "relativeTime": 6031,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 35 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 35 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": 1765150803266,
      "relativeTime": 6082,
      "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": 1026.5,
        "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": 1765150818186,
      "relativeTime": 21002,
      "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#dashboard"
        },
        "snapshot": {
          "timestamp": 1765150818186,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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\" aria-current=\"page\">\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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150820186,
      "relativeTime": 23002,
      "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#projects"
        },
        "snapshot": {
          "timestamp": 1765150820185,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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\" aria-current=\"page\">\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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150821185,
      "relativeTime": 24001,
      "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": 1765150821185,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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\" aria-current=\"page\">\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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150821718,
      "relativeTime": 24534,
      "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": 1765150821722,
      "relativeTime": 24538,
      "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": 1765150821724,
      "relativeTime": 24540,
      "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": 1765150821727,
      "relativeTime": 24543,
      "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": 1765150821731,
      "relativeTime": 24547,
      "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": 1765150821733,
      "relativeTime": 24549,
      "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": 1765150822185,
      "relativeTime": 25001,
      "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": 1765150822185,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\n              <a class=\"nav-item nav-item--level-2 active\" data-page=\"services\" href=\"#services\" tabindex=\"0\" aria-current=\"page\">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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150824143,
      "relativeTime": 26959,
      "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": 1765150824146,
      "relativeTime": 26962,
      "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": 1765150824147,
      "relativeTime": 26963,
      "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": 1765150824148,
      "relativeTime": 26964,
      "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": 1765150824152,
      "relativeTime": 26968,
      "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": 1765150824153,
      "relativeTime": 26969,
      "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": 1765150824185,
      "relativeTime": 27001,
      "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": 1765150824185,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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\" aria-current=\"page\">Quick Wins</a>\n            </div>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150824740,
      "relativeTime": 27556,
      "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": 1765150824742,
      "relativeTime": 27558,
      "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": 1765150824744,
      "relativeTime": 27560,
      "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": 1765150824745,
      "relativeTime": 27561,
      "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": 1765150824748,
      "relativeTime": 27564,
      "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": 1765150824749,
      "relativeTime": 27565,
      "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": 1765150825186,
      "relativeTime": 28002,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#chat"
        },
        "snapshot": {
          "timestamp": 1765150825185,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1 active\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\" aria-current=\"page\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150827186,
      "relativeTime": 30002,
      "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#tokens"
        },
        "snapshot": {
          "timestamp": 1765150827186,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\n              <a class=\"nav-item nav-item--level-2 active\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\" aria-current=\"page\">Tokens</a>\n              <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n            </div>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\n      <div class=\"page-header\">\n        <h1>Design Tokens</h1>\n        <p class=\"text-muted\">\n          Extract and manage design tokens from Figma\n        </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\">Total Tokens</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n        \n          \n            <div class=\"stat\">\n              <div class=\"stat__label\">Colors</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n        \n          \n            <div class=\"stat\">\n              <div class=\"stat__label\">Spacing</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n        \n          \n            <div class=\"stat\">\n              <div class=\"stat__label\">Typography</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n      </div>\n\n      \n      <div class=\"flex justify-between items-center mt-6 mb-4\">\n        <div class=\"flex gap-3\">\n          \n            Extract from Figma\n          \n          \n            Sync to Files\n          \n        </div>\n        <div class=\"flex gap-2 items-center\">\n          <span class=\"text-sm text-muted\">Export as:</span>\n          CSS\n          SCSS\n          JSON\n          TypeScript\n        </div>\n      </div>\n\n      \n        \n          \n            <div class=\"text-center p-8\">\n              <svg height=\"48\" width=\"48\" class=\"mx-auto mb-4 opacity-50\">\n                \n                \n              </svg>\n              <p class=\"text-muted mb-4\">No tokens extracted yet.</p>\n              <p class=\"text-sm text-muted mb-4\">Connect to Figma and extract design tokens to see them here.</p>\n              \n                Extract Tokens from Figma\n              \n            </div>\n          \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": 1285,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
      "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": 1765150827614,
      "relativeTime": 30430,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
        "initiatorType": "fetch",
        "duration": 2.800000011920929,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
      "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": 1765150827617,
      "relativeTime": 30433,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "initiatorType": "fetch",
        "duration": 2.600000023841858,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
      "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": 1765150827619,
      "relativeTime": 30435,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "initiatorType": "fetch",
        "duration": 1,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
      "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": 1765150827620,
      "relativeTime": 30436,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "initiatorType": "fetch",
        "duration": 0.5999999940395355,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
      "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": 1765150828186,
      "relativeTime": 31002,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#tokens",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#figma"
        },
        "snapshot": {
          "timestamp": 1765150828186,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\n              <a class=\"nav-item nav-item--level-2 active\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\" aria-current=\"page\">Figma</a>\n              <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150828507,
      "relativeTime": 31323,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 67 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 67 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": 1765150828558,
      "relativeTime": 31374,
      "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": 1313.5999999940395,
        "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": 1765150829287,
      "relativeTime": 32103,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 197.59999999403954,
        "transferSize": 583,
        "encodedBodySize": 283,
        "decodedBodySize": 283
      },
      "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": 1765150831185,
      "relativeTime": 34001,
      "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#components"
        },
        "snapshot": {
          "timestamp": 1765150831184,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#components",
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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 active\" data-page=\"components\" href=\"#components\" tabindex=\"0\" aria-current=\"page\">Components</a>\n            </div>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\n      <div class=\"page-header\">\n        <h1>Components</h1>\n        <p class=\"text-muted\">View extracted components and generate code</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\">Total Components</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n        \n          \n            <div class=\"stat\">\n              <div class=\"stat__label\">With Variants</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n        \n          \n            <div class=\"stat\">\n              <div class=\"stat__label\">With Properties</div>\n              <div class=\"stat__value\">0</div>\n            </div>\n          \n        \n        \n          \n            <div class=\"stat\">\n              <div class=\"stat__label\">Target Framework</div>\n              <div class=\"stat__value text-lg\">React</div>\n            </div>\n          \n        \n      </div>\n\n      \n      <div class=\"flex justify-between items-center mt-6 mb-4\">\n        <div class=\"flex gap-3\">\n          \n            Extract from Figma\n          \n          \n            Validate All\n          \n        </div>\n        <div class=\"flex gap-2 items-center\">\n          <span class=\"text-sm text-muted\">Generate for:</span>\n          \n            R\n          \n            V\n          \n            W\n          \n            S\n          \n        </div>\n      </div>\n\n      \n\n      \n        \n          \n            <div class=\"text-center p-8\">\n              <svg height=\"48\" width=\"48\" class=\"mx-auto mb-4 opacity-50\">\n                \n                \n                \n              </svg>\n              <p class=\"text-muted mb-4\">No components extracted yet.</p>\n              <p class=\"text-sm text-muted mb-4\">Extract components from your Figma file to generate code.</p>\n              \n                Extract Components from Figma\n              \n            </div>\n          \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": 1285,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#components",
      "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": 1765150835185,
      "relativeTime": 38001,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#components",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#teams"
        },
        "snapshot": {
          "timestamp": 1765150835184,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\n              <a class=\"nav-item nav-item--level-2 active\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\" aria-current=\"page\">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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\n      <div class=\"page-header\">\n        <h1>Team Management</h1>\n        <p class=\"text-muted\">Manage teams and permissions</p>\n      </div>\n\n      <div class=\"flex gap-3 mt-6 mb-4\">\n        \n      </div>\n\n      <div class=\"grid grid-cols-3 gap-4 mt-4\">\n        \n          \n            Design System Core\n            Active\n          \n          \n            <div class=\"flex flex-col gap-2 text-sm\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Members:</span>\n                <span>5</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Projects:</span>\n                <span>3</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Your Role:</span>\n                TEAM_LEAD\n              </div>\n            </div>\n          \n          \n            View Details\n          \n        \n\n        \n          \n            Product Team A\n            Member\n          \n          \n            <div class=\"flex flex-col gap-2 text-sm\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Members:</span>\n                <span>8</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Projects:</span>\n                <span>2</span>\n              </div>\n            </div>\n          \n          \n            View Details\n          \n        \n      </div>\n\n      \n        \n          Role Permissions\n        \n        \n          <div class=\"grid grid-cols-4 gap-4 text-sm\">\n            <div>\n              <h4 class=\"font-medium mb-2\">Super Admin</h4>\n              <p class=\"text-muted\">Full system access</p>\n            </div>\n            <div>\n              <h4 class=\"font-medium mb-2\">Team Lead</h4>\n              <p class=\"text-muted\">Manage team, sync, generate</p>\n            </div>\n            <div>\n              <h4 class=\"font-medium mb-2\">Developer</h4>\n              <p class=\"text-muted\">Read, write, sync</p>\n            </div>\n            <div>\n              <h4 class=\"font-medium mb-2\">Viewer</h4>\n              <p class=\"text-muted\">Read-only access</p>\n            </div>\n          </div>\n        \n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </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": 1285,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150840185,
      "relativeTime": 43001,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#audit"
        },
        "snapshot": {
          "timestamp": 1765150840185,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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 active\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\" aria-current=\"page\">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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\n      <div class=\"page-header\">\n        <h1>Audit Log</h1>\n        <p class=\"text-muted\">History of all user actions and system events</p>\n      </div>\n\n      \n      <div class=\"mt-6\">\n        \n          \n            Filters\n          \n          \n            <div class=\"grid grid-cols-4 gap-4\">\n              <div>\n                Category\n                \n                  All Categories\n                  Design System\n                  Code\n                  Configuration\n                  Project\n                  Team\n                  Storybook\n                \n              </div>\n\n              <div>\n                Severity\n                \n                  All Severities\n                  Info\n                  Warning\n                  Critical\n                \n              </div>\n\n              <div>\n                Start Date\n                <input class=\"w-full mt-2 p-2 rounded border\" id=\"audit-start-date\" type=\"date\">\n              </div>\n\n              <div>\n                End Date\n                <input class=\"w-full mt-2 p-2 rounded border\" id=\"audit-end-date\" type=\"date\">\n              </div>\n            </div>\n\n            <div class=\"flex gap-3 mt-4\">\n              \n                Apply Filters\n              \n              \n                Clear Filters\n              \n              \n                \ud83d\udce5 Export JSON\n              \n              \n                \ud83d\udce5 Export CSV\n              \n            </div>\n          \n        \n      </div>\n\n      \n      <div class=\"mt-6\">\n        \n          \n            Activity History\n            \n              <span id=\"audit-total-count\">Loading...</span>\n            \n          \n          \n            <div id=\"audit-log-content\">\n              <div class=\"text-center py-8 text-muted\">\n                Loading audit log...\n              </div>\n            </div>\n\n            \n            <div style=\"display: none;\" id=\"audit-pagination\" class=\"flex justify-between items-center mt-6\">\n              <div class=\"text-sm text-muted\">\n                Showing <span id=\"audit-showing\"></span> of <span id=\"audit-total\"></span> entries\n              </div>\n              <div class=\"flex gap-2\">\n                \n                  Previous\n                \n                \n                  Next\n                \n              </div>\n            </div>\n          \n        \n      </div>\n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </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": 1285,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150840359,
      "relativeTime": 43175,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 198.60000002384186,
        "transferSize": 2198,
        "encodedBodySize": 1898,
        "decodedBodySize": 1898
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150840558,
      "relativeTime": 43374,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 400.30000001192093,
        "transferSize": 2198,
        "encodedBodySize": 1898,
        "decodedBodySize": 1898
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150840758,
      "relativeTime": 43574,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 600.3000000119209,
        "transferSize": 2198,
        "encodedBodySize": 1898,
        "decodedBodySize": 1898
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150840949,
      "relativeTime": 43765,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 794.9000000059605,
        "transferSize": 2198,
        "encodedBodySize": 1898,
        "decodedBodySize": 1898
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150841155,
      "relativeTime": 43971,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 998.5,
        "transferSize": 2198,
        "encodedBodySize": 1898,
        "decodedBodySize": 1898
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150841362,
      "relativeTime": 44178,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 1203.800000011921,
        "transferSize": 2198,
        "encodedBodySize": 1898,
        "decodedBodySize": 1898
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150842185,
      "relativeTime": 45001,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins"
        },
        "snapshot": {
          "timestamp": 1765150842185,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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 active\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\" aria-current=\"page\">Plugins</a>\n              <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n            </div>\n          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\n      <div class=\"page-header\">\n        <h1>Plugins</h1>\n        <p class=\"text-muted\">1 of 1 plugins enabled</p>\n      </div>\n\n      <div class=\"plugins-grid\">\n        \n      <div data-plugin-id=\"claude-ai\" class=\"plugin-card enabled\">\n        <div class=\"plugin-card__header\">\n          <div class=\"plugin-card__icon\">\ud83e\udd16</div>\n          <div class=\"plugin-card__title\">\n            <div class=\"plugin-card__name\">Claude AI Assistant</div>\n            <div class=\"plugin-card__version\">v1.0.0</div>\n          </div>\n          <div data-plugin=\"claude-ai\" data-action=\"togglePlugin\" class=\"plugin-toggle enabled\">\n          </div>\n        </div>\n        <div class=\"plugin-card__desc\">Enhanced Claude AI integration for design system workflows</div>\n        \n          <div class=\"plugin-card__settings\">\n            \n        <div class=\"plugin-setting\">\n          <span class=\"plugin-setting__label\">Claude Model</span>\n          \n            \n              Claude 3 Sonnet (Fast)\n            \n              Claude 3 Opus (Advanced)\n            \n              Claude 3 Haiku (Quick)\n            \n          \n        </div>\n      \n        <div class=\"plugin-setting\">\n          <span class=\"plugin-setting__label\">Auto-suggest improvements</span>\n          <div data-type=\"boolean\" data-key=\"autoSuggest\" data-plugin=\"claude-ai\" data-action=\"setPluginSetting\" class=\"plugin-toggle enabled\">\n          </div>\n        </div>\n      \n        <div class=\"plugin-setting\">\n          <span class=\"plugin-setting__label\">Context Depth</span>\n          \n            \n              Minimal\n            \n              Standard\n            \n              Deep Analysis\n            \n          \n        </div>\n      \n          </div>\n        \n        <div class=\"plugin-card__meta\">\n          <span class=\"plugin-card__author\">by DSS Team</span>\n          \n            Enabled\n          \n        </div>\n      </div>\n    \n      </div>\n\n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </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": 1285,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150843185,
      "relativeTime": 46001,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#settings"
        },
        "snapshot": {
          "timestamp": 1765150843185,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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 active\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\" aria-current=\"page\">Settings</a>\n            </div>\n          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\n      <div class=\"page-header\">\n        <h1>Settings</h1>\n        <p class=\"text-muted\">Configure your design system server</p>\n      </div>\n\n      <div class=\"mt-6 flex flex-col gap-6\">\n        \n        \n          \n            Server Mode\n            Choose how DSS operates\n          \n          \n            <div class=\"flex gap-4\">\n              <div data-mode=\"local\" data-action=\"setMode\" style=\"background: var(--muted)\" class=\"flex-1 p-4 rounded cursor-pointer ring-2 ring-primary\">\n                <h4 class=\"font-medium mb-1\">Local Dev Companion</h4>\n                <p class=\"text-sm text-muted\">Run alongside your project, provides UI dev assistance, component preview, and local services.</p>\n              </div>\n              <div data-mode=\"server\" data-action=\"setMode\" style=\"background: var(--muted)\" class=\"flex-1 p-4 rounded cursor-pointer\">\n                <h4 class=\"font-medium mb-1\">Remote Server</h4>\n                <p class=\"text-sm text-muted\">Deployed centrally, serves design systems to teams, multi-project management.</p>\n              </div>\n            </div>\n          \n        \n\n        \n        \n          \n            Figma Integration\n            Connect to Figma API\n            \n              Connected\n            \n          \n          \n            <div class=\"flex flex-col gap-4\">\n              \n              <p class=\"text-xs text-muted\">\n                Get your token from <a class=\"text-primary\" target=\"_blank\" href=\"https://www.figma.com/developers/api#access-tokens\">Figma Settings \u2192 Personal Access Tokens</a>\n              </p>\n              <div class=\"flex gap-2\">\n                \n                  Save Token\n                \n                \n                  Test Connection\n                \n              </div>\n              \n            </div>\n          \n        \n\n        \n        \n          \n            External Tools &amp; Integrations\n            Configure connected tools and services\n          \n          \n            <div class=\"flex flex-col gap-4\">\n              \n      <div style=\"background: var(--muted); border-color: var(--border)\" class=\"p-4 rounded border\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"font-medium\">Storybook</span>\n            documentation\n          </div>\n          \n            \n              Open\n            \n          \n        </div>\n        <p class=\"text-sm text-muted mb-3\">Component documentation and playground</p>\n        \n          <div class=\"text-xs text-muted mb-3\">\n            URL: <code>https://localhost/storybook/</code>\n            Host from server config: <code>localhost</code>\n          </div>\n          <div class=\"flex gap-2\">\n            \n              Initialize Storybook\n            \n            \n              Clear Stories\n            \n          </div>\n        \n        \n      </div>\n    \n      <div style=\"background: var(--muted); border-color: var(--border)\" class=\"p-4 rounded border\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"font-medium\">Figma</span>\n            design\n          </div>\n          \n            \n              Open\n            \n          \n        </div>\n        <p class=\"text-sm text-muted mb-3\">Design file integration and token extraction</p>\n        \n        \n          <div class=\"text-xs text-muted\">\n            Token status: Check connection above\n          </div>\n        \n      </div>\n    \n            </div>\n          \n        \n\n        \n        \n          \n            Companion Services\n            Discovered and configured services\n          \n          \n            <div class=\"grid grid-cols-3 gap-4\">\n              \n      <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <h4 class=\"font-medium\">Storybook</h4>\n          <span class=\"status-dot status-dot--success\"></span>\n        </div>\n        <p class=\"text-sm text-muted mb-2\">\n          Running on :6006\n        </p>\n        \n          \n            Open\n          \n        \n      </div>\n    \n              \n      <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <h4 class=\"font-medium\">Vite Dev Server</h4>\n          <span class=\"status-dot status-dot--success\"></span>\n        </div>\n        <p class=\"text-sm text-muted mb-2\">\n          Running on :3000\n        </p>\n        \n          \n            Open\n          \n        \n      </div>\n    \n              \n      <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <h4 class=\"font-medium\">Next.js</h4>\n          <span class=\"status-dot status-dot--success\"></span>\n        </div>\n        <p class=\"text-sm text-muted mb-2\">\n          Running on :3000\n        </p>\n        \n          \n            Open\n          \n        \n      </div>\n    \n            </div>\n            <div class=\"mt-4\">\n              \n                Refresh Services\n              \n            </div>\n          \n        \n\n        \n        \n          \n            Features\n            Enable or disable DSS features\n          \n          \n            <div class=\"flex flex-col gap-3\">\n              \n      <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n        <div>\n          <div class=\"font-medium\">Visual QA</div>\n          <div class=\"text-sm text-muted\">Compare Figma designs with implementation</div>\n        </div>\n        \n          Enabled\n        \n      </div>\n    \n              \n      <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n        <div>\n          <div class=\"font-medium\">Token Sync</div>\n          <div class=\"text-sm text-muted\">Sync design tokens to code</div>\n        </div>\n        \n          Enabled\n        \n      </div>\n    \n              \n      <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n        <div>\n          <div class=\"font-medium\">Code Generation</div>\n          <div class=\"text-sm text-muted\">Generate component code from Figma</div>\n        </div>\n        \n          Enabled\n        \n      </div>\n    \n              \n      <div style=\"background: var(--muted)\" class=\"flex items-center justify-between p-3 rounded\">\n        <div>\n          <div class=\"font-medium\">AI Advisor</div>\n          <div class=\"text-sm text-muted\">Get AI suggestions for design system improvements</div>\n        </div>\n        \n          Enabled\n        \n      </div>\n    \n            </div>\n          \n        \n\n        \n        \n          \n            Appearance\n            Customize the interface\n          \n          \n            <div class=\"flex items-center justify-between\">\n              <span>Dark Mode</span>\n              \n                Toggle Theme\n              \n            </div>\n          \n        \n\n        \n        \n          \n            Output Configuration\n            Token and component generation settings\n          \n          \n            <div class=\"grid grid-cols-2 gap-4\">\n              \n              \n            </div>\n          \n        \n\n        \n        \n          \n            \u26a0\ufe0f Danger Zone\n            Irreversible operations - use with caution\n          \n          \n            <div class=\"flex flex-col gap-4\">\n              <div>\n                <h4 class=\"font-medium mb-2\">Reset DSS to Fresh State</h4>\n                <p class=\"text-sm text-muted mb-3\">\n                  This will delete all user-created themes, cached data, and project databases.\n                  The DSS structure and default themes will be preserved.\n                </p>\n                \n                  Reset DSS\n                \n              </div>\n            </div>\n          \n        \n\n        \n        \n          \n            API Status\n          \n          \n            <div class=\"flex flex-col gap-2 text-sm\">\n              <div class=\"flex justify-between\">\n                <span>API Mode:</span>\n                \n                  Live\n                \n              </div>\n              <div class=\"flex justify-between\">\n                <span>Base URL:</span>\n                <span class=\"text-muted\">/api</span>\n              </div>\n            </div>\n          \n        \n      </div>\n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </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": 1285,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765150845186,
      "relativeTime": 48002,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard"
        },
        "snapshot": {
          "timestamp": 1765150845185,
          "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  <!-- DSS Layered CSS Architecture -->\n  <!-- Layer 0: Core/Structural (reset, grid, utilities) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-core.css\">\n  <!-- Layer 1: Design Tokens (colors, spacing, typography) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-tokens.css\">\n  <!-- Layer 2: Semantic Theme (token-to-purpose mapping) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-theme.css\">\n  <!-- Layer 3: Component Styles (styled components using semantic tokens) -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/dss-components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n</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\" aria-current=\"page\">\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        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Analysis</div>\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            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </div>\n\n        <!-- Design System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <div class=\"nav-section__content\">\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Foundations</div>\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            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Integrations</div>\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:6006\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost:6006\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n            </div>\n          </div>\n        </div>\n\n        <!-- System -->\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <div class=\"nav-section__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <div class=\"nav-sub-section\">\n              <div class=\"nav-sub-section__title\">Administration</div>\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          </div>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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=\"landing-page\" class=\"landing-page\">\n      <div class=\"landing-hero\">\n        <h1>Design System Swarm</h1>\n        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>\n      </div>\n      \n      <div class=\"landing-content\">\n        \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Overview</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#dashboard\" class=\"dashboard-card\" data-page=\"dashboard\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcca</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Dashboard</h3>\n                        <p class=\"dashboard-card__description\">System overview and key metrics</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#projects\" class=\"dashboard-card\" data-page=\"projects\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcc1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Projects</h3>\n                        <p class=\"dashboard-card__description\">Manage and organize projects</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Tools</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#services\" class=\"dashboard-card\" data-page=\"services\">\n                      <div class=\"dashboard-card__icon\">\u2699\ufe0f</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Services</h3>\n                        <p class=\"dashboard-card__description\">Manage system services and endpoints</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#quick-wins\" class=\"dashboard-card\" data-page=\"quick-wins\">\n                      <div class=\"dashboard-card__icon\">\u2b50</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Quick Wins</h3>\n                        <p class=\"dashboard-card__description\">Quick optimization opportunities</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#chat\" class=\"dashboard-card\" data-page=\"chat\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcac</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Chat</h3>\n                        <p class=\"dashboard-card__description\">AI-powered chat assistant</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">Design System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#tokens\" class=\"dashboard-card\" data-page=\"tokens\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfa8</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Tokens</h3>\n                        <p class=\"dashboard-card__description\">Design tokens and variables</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#components\" class=\"dashboard-card\" data-page=\"components\">\n                      <div class=\"dashboard-card__icon\">\ud83e\udde9</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Components</h3>\n                        <p class=\"dashboard-card__description\">Reusable component library</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#figma\" class=\"dashboard-card\" data-page=\"figma\">\n                      <div class=\"dashboard-card__icon\">\ud83c\udfad</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Figma</h3>\n                        <p class=\"dashboard-card__description\">Figma integration and sync</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"http://localhost:6006\" class=\"dashboard-card\" target=\"_blank\" data-page=\"storybook\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcda</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Storybook</h3>\n                        <p class=\"dashboard-card__description\">Component documentation</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n            <div class=\"dashboard-category\">\n              <h2 class=\"dashboard-category__title\">System</h2>\n              <div class=\"dashboard-grid\">\n                \n                    <a href=\"#docs\" class=\"dashboard-card\" data-page=\"docs\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udcd6</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Documentation</h3>\n                        <p class=\"dashboard-card__description\">System documentation and guides</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#teams\" class=\"dashboard-card\" data-page=\"teams\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udc65</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Teams</h3>\n                        <p class=\"dashboard-card__description\">Team management and permissions</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#audit\" class=\"dashboard-card\" data-page=\"audit\">\n                      <div class=\"dashboard-card__icon\">\u2705</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Audit</h3>\n                        <p class=\"dashboard-card__description\">Audit logs and system events</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#plugins\" class=\"dashboard-card\" data-page=\"plugins\">\n                      <div class=\"dashboard-card__icon\">\ud83d\udd0c</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Plugins</h3>\n                        <p class=\"dashboard-card__description\">Plugin management system</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n                    <a href=\"#settings\" class=\"dashboard-card\" data-page=\"settings\">\n                      <div class=\"dashboard-card__icon\">\u26a1</div>\n                      <div class=\"dashboard-card__content\">\n                        <h3 class=\"dashboard-card__title\">Settings</h3>\n                        <p class=\"dashboard-card__description\">System configuration and preferences</p>\n                      </div>\n                      <div class=\"dashboard-card__meta\">\n                        <span>\u2192</span>\n                      </div>\n                    </a>\n                  \n              </div>\n            </div>\n          \n      </div>\n    </div>\n      <div id=\"page-content\" class=\"app-content\" style=\"display: block;\">\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": 1285,
            "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": 1765150857612,
      "relativeTime": 60428,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
        "initiatorType": "fetch",
        "duration": 1.4000000059604645,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150857615,
      "relativeTime": 60431,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "initiatorType": "fetch",
        "duration": 1.2999999821186066,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150857617,
      "relativeTime": 60433,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "initiatorType": "fetch",
        "duration": 0.9000000059604645,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150857619,
      "relativeTime": 60435,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "initiatorType": "fetch",
        "duration": 0.7000000178813934,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150858652,
      "relativeTime": 61468,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 86 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 86 logs to 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": 1765150858704,
      "relativeTime": 61520,
      "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": 1458.4000000059605,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "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": 1765150859252,
      "relativeTime": 62068,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 205.09999999403954,
        "transferSize": 583,
        "encodedBodySize": 283,
        "decodedBodySize": 283
      },
      "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": 1765150887615,
      "relativeTime": 90431,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
        "initiatorType": "fetch",
        "duration": 3.7999999821186066,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150887618,
      "relativeTime": 90434,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "initiatorType": "fetch",
        "duration": 1.5999999940395355,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150887639,
      "relativeTime": 90455,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "initiatorType": "fetch",
        "duration": 19.400000005960464,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150887641,
      "relativeTime": 90457,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "initiatorType": "fetch",
        "duration": 2.199999988079071,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150888406,
      "relativeTime": 91222,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/claude/chat",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/claude/chat",
        "initiatorType": "fetch",
        "duration": 5337.799999982119,
        "transferSize": 940,
        "encodedBodySize": 640,
        "decodedBodySize": 640
      },
      "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": 1765150888800,
      "relativeTime": 91616,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 94 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 94 logs to 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": 1765150888851,
      "relativeTime": 91667,
      "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": 1606.300000011921,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "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": 1765150889241,
      "relativeTime": 92057,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 196,
        "transferSize": 583,
        "encodedBodySize": 283,
        "decodedBodySize": 283
      },
      "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": 1765150918104,
      "relativeTime": 120920,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
        "initiatorType": "fetch",
        "duration": 3.199999988079071,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150918109,
      "relativeTime": 120925,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "initiatorType": "fetch",
        "duration": 2.0999999940395355,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150918112,
      "relativeTime": 120928,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "initiatorType": "fetch",
        "duration": 1,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150918115,
      "relativeTime": 120931,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "initiatorType": "fetch",
        "duration": 0.8999999761581421,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150919650,
      "relativeTime": 122466,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 561.2000000178814,
        "transferSize": 583,
        "encodedBodySize": 283,
        "decodedBodySize": 283
      },
      "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": 1765150919662,
      "relativeTime": 122478,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 102 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 102 logs to 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": 1765150919714,
      "relativeTime": 122530,
      "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": 1569.800000011921,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "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": 1765150947611,
      "relativeTime": 150427,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-core.css",
        "initiatorType": "fetch",
        "duration": 1.5999999940395355,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150947613,
      "relativeTime": 150429,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "initiatorType": "fetch",
        "duration": 0.7000000178813934,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150947616,
      "relativeTime": 150432,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "initiatorType": "fetch",
        "duration": 0.8999999761581421,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150947618,
      "relativeTime": 150434,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
      "data": {
        "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "initiatorType": "fetch",
        "duration": 0.699999988079071,
        "transferSize": 0,
        "encodedBodySize": 0,
        "decodedBodySize": 0
      },
      "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": 1765150948793,
      "relativeTime": 151609,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 108 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 108 logs to 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": 1765150948845,
      "relativeTime": 151661,
      "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": 1599.8999999761581,
        "transferSize": 443,
        "encodedBodySize": 143,
        "decodedBodySize": 143
      },
      "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": 1765150949281,
      "relativeTime": 152097,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 196.69999998807907,
        "transferSize": 583,
        "encodedBodySize": 283,
        "decodedBodySize": 283
      },
      "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"
    }
  ],
  "diagnostic": {
    "sessionId": "session-1765150797184-pfltukfs2",
    "uptime": 180899,
    "totalLogs": 111,
    "errorCount": 0,
    "warnCount": 1,
    "networkRequests": 53,
    "memory": {
      "usedJSHeapSize": 7551744,
      "jsHeapSizeLimit": 4294967296,
      "usagePercent": "0.18"
    },
    "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",
    "recentErrors": [],
    "recentNetworkRequests": [
      {
        "timestamp": 1765150949281,
        "relativeTime": 152097,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/health",
        "data": {
          "url": "https://dss.overbits.luz.uy/health",
          "initiatorType": "fetch",
          "duration": 196.69999998807907,
          "transferSize": 583,
          "encodedBodySize": 283,
          "decodedBodySize": 283
        },
        "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": 1765150948845,
        "relativeTime": 151661,
        "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": 1599.8999999761581,
          "transferSize": 443,
          "encodedBodySize": 143,
          "decodedBodySize": 143
        },
        "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": 1765150947618,
        "relativeTime": 150434,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
        "data": {
          "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-components.css",
          "initiatorType": "fetch",
          "duration": 0.699999988079071,
          "transferSize": 0,
          "encodedBodySize": 0,
          "decodedBodySize": 0
        },
        "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": 1765150947616,
        "relativeTime": 150432,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
        "data": {
          "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-theme.css",
          "initiatorType": "fetch",
          "duration": 0.8999999761581421,
          "transferSize": 0,
          "encodedBodySize": 0,
          "decodedBodySize": 0
        },
        "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": 1765150947613,
        "relativeTime": 150429,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
        "data": {
          "url": "https://dss.overbits.luz.uy/admin-ui/css/dss-tokens.css",
          "initiatorType": "fetch",
          "duration": 0.7000000178813934,
          "transferSize": 0,
          "encodedBodySize": 0,
          "decodedBodySize": 0
        },
        "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"
      }
    ]
  }
}