{
  "sessionId": "session-1765116329261-m4qapuckd",
  "exportedAt": "2025-12-07T14:08:00.118Z",
  "logs": [
    {
      "timestamp": 1765116329262,
      "relativeTime": 1,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Initializing application... color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Initializing application...",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329271,
      "relativeTime": 10,
      "level": "metric",
      "category": "performance",
      "message": "Page load completed",
      "data": {
        "domContentLoaded": 0.699999988079071,
        "loadComplete": 0.09999999403953552,
        "totalTime": 2319.199999988079,
        "dnsLookup": 0,
        "tcpConnection": 0,
        "requestTime": 216,
        "responseTime": 1.699999988079071,
        "renderTime": null
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329283,
      "relativeTime": 22,
      "level": "log",
      "category": "console",
      "message": "[DssDB] Database ready",
      "data": {
        "args": [
          "[DssDB] Database ready"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329455,
      "relativeTime": 194,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects",
        "initiatorType": "fetch",
        "duration": 193.59999999403954,
        "transferSize": 590,
        "encodedBodySize": 290,
        "decodedBodySize": 290
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "[ConfigLoader] Configuration loaded successfully [object Object]",
      "data": {
        "args": [
          "[ConfigLoader] Configuration loaded successfully",
          {
            "dssHost": "localhost",
            "dssPort": "3456",
            "storybookPort": 6006
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Server configuration loaded color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Server configuration loaded",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0 color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing... color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing...",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Plugins initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Plugins initialized",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329456,
      "relativeTime": 195,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Messaging system initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Messaging system initialized",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329459,
      "relativeTime": 198,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Router initialized with 12 routes color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Router initialized with 12 routes",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329459,
      "relativeTime": 198,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329459,
      "relativeTime": 198,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/config",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/config",
        "initiatorType": "fetch",
        "duration": 192.30000001192093,
        "transferSize": 361,
        "encodedBodySize": 61,
        "decodedBodySize": 61
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116329479,
      "relativeTime": 218,
      "level": "warn",
      "category": "console",
      "message": "SSE connection unavailable, using local-only mode",
      "data": {
        "args": [
          "SSE connection unavailable, using local-only mode"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116330162,
      "relativeTime": 901,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 700.8000000119209,
        "transferSize": 581,
        "encodedBodySize": 281,
        "decodedBodySize": 281
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116330357,
      "relativeTime": 1096,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/config",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/config",
        "initiatorType": "fetch",
        "duration": 192.80000001192093,
        "transferSize": 361,
        "encodedBodySize": 61,
        "decodedBodySize": 61
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116330361,
      "relativeTime": 1100,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/config/figma",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/config/figma",
        "initiatorType": "fetch",
        "duration": 196.7000000178814,
        "transferSize": 475,
        "encodedBodySize": 175,
        "decodedBodySize": 175
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116330556,
      "relativeTime": 1295,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/services",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/services",
        "initiatorType": "fetch",
        "duration": 392.09999999403954,
        "transferSize": 848,
        "encodedBodySize": 548,
        "decodedBodySize": 548
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116330905,
      "relativeTime": 1644,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/discovery/scan",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/discovery/scan",
        "initiatorType": "fetch",
        "duration": 347,
        "transferSize": 835,
        "encodedBodySize": 535,
        "decodedBodySize": 535
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116331106,
      "relativeTime": 1845,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/discovery/stats",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/discovery/stats",
        "initiatorType": "fetch",
        "duration": 197.90000000596046,
        "transferSize": 433,
        "encodedBodySize": 133,
        "decodedBodySize": 133
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116331305,
      "relativeTime": 2044,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/discovery/activity",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/discovery/activity",
        "initiatorType": "fetch",
        "duration": 198.7999999821186,
        "transferSize": 3771,
        "encodedBodySize": 3471,
        "decodedBodySize": 3471
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116331496,
      "relativeTime": 2235,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Loading dashboard data color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Loading dashboard data",
          "color: #2196F3; font-weight: bold",
          {
            "projectId": "proj-1764991776412"
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116331498,
      "relativeTime": 2237,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Application initialized successfully color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Application initialized successfully",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116331499,
      "relativeTime": 2238,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects",
        "initiatorType": "fetch",
        "duration": 190.80000001192093,
        "transferSize": 590,
        "encodedBodySize": 290,
        "decodedBodySize": 290
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116331699,
      "relativeTime": 2438,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
        "initiatorType": "fetch",
        "duration": 199,
        "transferSize": 668,
        "encodedBodySize": 368,
        "decodedBodySize": 368
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116334850,
      "relativeTime": 5589,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 26 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 26 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116334901,
      "relativeTime": 5640,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 582.5999999940395,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116346248,
      "relativeTime": 16987,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116346253,
      "relativeTime": 16992,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116346260,
      "relativeTime": 16999,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116346262,
      "relativeTime": 17001,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116346266,
      "relativeTime": 17005,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#services"
        },
        "snapshot": {
          "timestamp": 1765116346266,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2 active\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <h1>Services</h1>\n            <p class=\"text-muted\">8 tools available</p>\n          </div>\n          <input style=\"width: 200px;\" class=\"input\" placeholder=\"Search...\" id=\"toolSearch\" type=\"text\">\n        </div>\n      </div>\n\n      <div class=\"tools-container\" id=\"toolsContainer\">\n        \n            <div data-category=\"Figma\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Figma</span>\n                <span class=\"tools-category__count\">1</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Figma\" data-tool=\"extract_tokens\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83c\udfa8</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">extract tokens</div>\n          <div class=\"tool-item__desc\">Extract design tokens from Figma file</div>\n        </div>\n        <span class=\"tool-item__params\">2p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n            <div data-category=\"Ingestion\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Ingestion</span>\n                <span class=\"tools-category__count\">2</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"export_tokens\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udce4</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">export tokens</div>\n          <div class=\"tool-item__desc\">Export tokens to specified format</div>\n        </div>\n        <span class=\"tool-item__params\">2p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"validate_tokens\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\u2713</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">validate tokens</div>\n          <div class=\"tool-item__desc\">Validate token structure and values</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n            <div data-category=\"Analysis\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Analysis</span>\n                <span class=\"tools-category__count\">4</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"discover_project\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udd0e</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">discover project</div>\n          <div class=\"tool-item__desc\">Discover project structure and frameworks</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"find_style_patterns\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udcca</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">find style patterns</div>\n          <div class=\"tool-item__desc\">Identify common style patterns</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"analyze_style_values\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udcc8</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">analyze style values</div>\n          <div class=\"tool-item__desc\">Analyze style property values</div>\n        </div>\n        <span class=\"tool-item__params\">2p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"check_naming_consistency\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83c\udff7\ufe0f</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">check naming consistency</div>\n          <div class=\"tool-item__desc\">Check component naming consistency</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n            <div data-category=\"Activity\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Activity</span>\n                <span class=\"tools-category__count\">1</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Activity\" data-tool=\"get_sync_history\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udcdc</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">get sync history</div>\n          <div class=\"tool-item__desc\">Get token sync history</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n      </div>\n\n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116348318,
      "relativeTime": 19057,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering chat page",
          "color: #2196F3; font-weight: bold",
          {
            "historyLength": 0,
            "model": "claude"
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116348322,
      "relativeTime": 19061,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering chat page",
          "color: #2196F3; font-weight: bold",
          {
            "historyLength": 0,
            "model": "claude"
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116348330,
      "relativeTime": 19069,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering chat page",
          "color: #2196F3; font-weight: bold",
          {
            "historyLength": 0,
            "model": "claude"
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116348331,
      "relativeTime": 19070,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering chat page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering chat page",
          "color: #2196F3; font-weight: bold",
          {
            "historyLength": 0,
            "model": "claude"
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116349262,
      "relativeTime": 20001,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#chat"
        },
        "snapshot": {
          "timestamp": 1765116349262,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1 active\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <h1>\ud83d\udcac AI Assistant</h1>\n            <p class=\"text-muted\">Ask questions about your design system</p>\n          </div>\n          <div class=\"flex gap-2\">\n            \n              \ud83e\udd16 Claude\n              \u2728 Gemini\n            \n            <button data-action=\"exportChat\" class=\"btn btn-outline btn-sm\">\n              \ud83d\udce5 Export\n            </button>\n            <button data-action=\"clearChat\" class=\"btn btn-outline btn-sm\">\n              \ud83d\uddd1\ufe0f Clear\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div style=\"height: calc(100vh - 200px);\" class=\"card flex flex-col\">\n        \n        <div class=\"flex-1 overflow-y-auto p-4 space-y-4\" id=\"chatMessages\">\n          \n            <div class=\"text-center text-muted py-12\">\n              <p class=\"text-lg mb-2\">\ud83d\udc4b Hi! I'm Claude</p>\n              <p>Ask me anything about your design system, tokens, or code</p>\n            </div>\n          \n        </div>\n\n        \n        <div class=\"border-t p-4\">\n          \n            <input class=\"input flex-1\" placeholder=\"Ask Claude something...\" id=\"chatInput\" type=\"text\">\n            <button data-action=\"sendChatMessage\" class=\"btn btn-primary\" type=\"submit\">\n              Send\n            </button>\n          \n        </div>\n      </div>\n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116358119,
      "relativeTime": 28858,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#chat",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#figma"
        },
        "snapshot": {
          "timestamp": 1765116358118,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2 active\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>Project Settings</h1>\n        <p class=\"text-muted\">Configure your project and Figma integration</p>\n      </div>\n\n      <div class=\"grid grid-cols-2 gap-6 mt-6\">\n        \n          \n            Project Details\n            Describe your design system project\n          \n          \n            \n          \n          \n            \n              Save Description\n            \n          \n        \n\n        \n          \n            Figma Connection\n            Configure your Figma file\n          \n          \n            \n            <p class=\"text-xs text-muted mt-2\">Find this in your Figma URL: figma.com/file/<strong>[FILE_KEY]</strong>/...</p>\n          \n          \n            \n              Save &amp; Connect\n            \n          \n        \n\n        \n          \n            Sync Status\n          \n          \n            <div class=\"flex flex-col gap-3\">\n              <div class=\"flex justify-between items-center\">\n                <span>Connection:</span>\n                \n                  Not configured\n                \n              </div>\n              <div class=\"flex justify-between items-center\">\n                <span>Last Sync:</span>\n                <span class=\"text-muted\">Never</span>\n              </div>\n            </div>\n          \n        \n      </div>\n\n      \n        \n          Available Tools\n          Figma integration capabilities\n        \n        \n          <div class=\"grid grid-cols-2 gap-4\">\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Extract Variables</h4>\n              <p class=\"text-sm text-muted\">Pull design tokens from Figma variables</p>\n            </div>\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Extract Components</h4>\n              <p class=\"text-sm text-muted\">Get component definitions and variants</p>\n            </div>\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Extract Styles</h4>\n              <p class=\"text-sm text-muted\">Pull text, color, and effect styles</p>\n            </div>\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Sync Tokens</h4>\n              <p class=\"text-sm text-muted\">Sync tokens to CSS/SCSS/JSON files</p>\n            </div>\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Visual Diff</h4>\n              <p class=\"text-sm text-muted\">Compare visual changes between versions</p>\n            </div>\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Validate Components</h4>\n              <p class=\"text-sm text-muted\">Check components against naming rules</p>\n            </div>\n            <div style=\"background: var(--muted)\" class=\"p-4 rounded\">\n              <h4 class=\"font-medium mb-1\">Generate Code</h4>\n              <p class=\"text-sm text-muted\">Create component code from designs</p>\n            </div>\n          </div>\n        \n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116360429,
      "relativeTime": 31168,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 39 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 39 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116360481,
      "relativeTime": 31220,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 1162.4000000059605,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116361696,
      "relativeTime": 32435,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 194.5,
        "transferSize": 581,
        "encodedBodySize": 281,
        "decodedBodySize": 281
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116368263,
      "relativeTime": 39002,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#figma",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#projects"
        },
        "snapshot": {
          "timestamp": 1765116368263,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#projects",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item active\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>Projects</h1>\n        <p class=\"text-muted\">Manage your design system projects</p>\n      </div>\n\n      <div class=\"flex justify-between items-center mt-6 mb-4\">\n        \n        \n          New Project\n        \n      </div>\n\n      \n\n      \n        <div class=\"grid grid-cols-2 gap-4\">\n          \n            \n              \n                test\n                \n                  active\n                \n              \n              \n                <p class=\"text-sm mb-3\">a test project</p>\n                <div class=\"flex flex-col gap-2 text-sm\">\n                  <div class=\"flex justify-between\">\n                    <span class=\"text-muted\">Figma Key:</span>\n                    <span class=\"font-mono text-xs\">figd_jRiYc6O6Uzt6PNP-TC4UkkVRn911Sx5clYK9HOtt</span>\n                  </div>\n                  <div class=\"flex justify-between\">\n                    <span class=\"text-muted\">Last Sync:</span>\n                    <span>Never</span>\n                  </div>\n                  <div class=\"flex justify-between\">\n                    <span class=\"text-muted\">Created:</span>\n                    <span>6/12/2025</span>\n                  </div>\n                </div>\n              \n              \n                <div class=\"flex gap-2\">\n                  \n                    Open\n                  \n                  \n                    Sync Tokens\n                  \n                  \n                    Delete\n                  \n                </div>\n              \n            \n          \n        </div>\n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#projects",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116369262,
      "relativeTime": 40001,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#projects",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard"
        },
        "snapshot": {
          "timestamp": 1765116369262,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item active\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n  <div class=\"page-header\">\n    <h1>UX Team Dashboard</h1>\n    <p class=\"text-muted\">Design consistency &amp; token validation \u00b7 <strong class=\"text-primary\">test</strong></p>\n  </div>\n\n  \n  <div class=\"grid grid-cols-4 gap-4 mt-6\">\n    \n      \n        <div class=\"stat\">\n          <div class=\"stat__label\">Figma Files</div>\n          <div class=\"stat__value\">0</div>\n        </div>\n      \n    \n\n    \n      \n        <div class=\"stat\">\n          <div class=\"stat__label\">Synced Files</div>\n          <div class=\"stat__value\">0</div>\n        </div>\n      \n    \n\n    \n      \n        <div class=\"stat\">\n          <div class=\"stat__label\">Pending Sync</div>\n          <div class=\"stat__value\">0</div>\n        </div>\n      \n    \n\n    \n      \n        <div class=\"stat\">\n          <div class=\"stat__label\">Design Tokens</div>\n          <div class=\"stat__value\">0</div>\n        </div>\n      \n    \n  </div>\n\n  \n  <div class=\"mt-6\">\n    \n      \n        \u2795 Add Figma File\n        Configure Figma files for this project\n      \n      \n        \n          <div>\n            File Name\n            <input class=\"w-full p-2 border rounded mt-1\" placeholder=\"Design System Components\" name=\"file_name\" type=\"text\">\n          </div>\n          <div>\n            Figma URL\n            <input class=\"w-full p-2 border rounded mt-1\" placeholder=\"https://figma.com/file/...\" name=\"figma_url\" type=\"url\">\n          </div>\n          <div>\n            File Key\n            <input class=\"w-full p-2 border rounded mt-1\" placeholder=\"abc123xyz\" name=\"file_key\" type=\"text\">\n            <p class=\"text-xs text-muted mt-1\">Extract from Figma URL: figma.com/file/<strong>FILE_KEY</strong>/...</p>\n          </div>\n          \n            Add Figma File\n          \n        \n      \n    \n  </div>\n\n  \n  <div class=\"mt-6\">\n    \n      \n        Figma Files (0)\n        Manage Figma files for this project\n      \n      \n        \n          <p class=\"text-muted text-sm text-center py-8\">\n            No Figma files configured yet. Add your first file above! \ud83d\udc46\n          </p>\n        \n      \n    \n  </div>\n</div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373109,
      "relativeTime": 43848,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373117,
      "relativeTime": 43856,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373124,
      "relativeTime": 43863,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373127,
      "relativeTime": 43866,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering services page color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering services page",
          "color: #2196F3; font-weight: bold",
          {
            "toolCount": 8,
            "teamContext": "ux",
            "categories": [
              "Projects",
              "Figma",
              "Ingestion",
              "Analysis",
              "Storybook",
              "Activity"
            ]
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373263,
      "relativeTime": 44002,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#dashboard",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#services"
        },
        "snapshot": {
          "timestamp": 1765116373262,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2 active\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <h1>Services</h1>\n            <p class=\"text-muted\">8 tools available</p>\n          </div>\n          <input style=\"width: 200px;\" class=\"input\" placeholder=\"Search...\" id=\"toolSearch\" type=\"text\">\n        </div>\n      </div>\n\n      <div class=\"tools-container\" id=\"toolsContainer\">\n        \n            <div data-category=\"Figma\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Figma</span>\n                <span class=\"tools-category__count\">1</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Figma\" data-tool=\"extract_tokens\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83c\udfa8</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">extract tokens</div>\n          <div class=\"tool-item__desc\">Extract design tokens from Figma file</div>\n        </div>\n        <span class=\"tool-item__params\">2p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n            <div data-category=\"Ingestion\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Ingestion</span>\n                <span class=\"tools-category__count\">2</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"export_tokens\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udce4</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">export tokens</div>\n          <div class=\"tool-item__desc\">Export tokens to specified format</div>\n        </div>\n        <span class=\"tool-item__params\">2p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Ingestion\" data-tool=\"validate_tokens\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\u2713</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">validate tokens</div>\n          <div class=\"tool-item__desc\">Validate token structure and values</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n            <div data-category=\"Analysis\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Analysis</span>\n                <span class=\"tools-category__count\">4</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"discover_project\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udd0e</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">discover project</div>\n          <div class=\"tool-item__desc\">Discover project structure and frameworks</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"find_style_patterns\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udcca</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">find style patterns</div>\n          <div class=\"tool-item__desc\">Identify common style patterns</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"analyze_style_values\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udcc8</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">analyze style values</div>\n          <div class=\"tool-item__desc\">Analyze style property values</div>\n        </div>\n        <span class=\"tool-item__params\">2p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n      <div data-action=\"executeTool\" data-category=\"Analysis\" data-tool=\"check_naming_consistency\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83c\udff7\ufe0f</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">check naming consistency</div>\n          <div class=\"tool-item__desc\">Check component naming consistency</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n            <div data-category=\"Activity\" class=\"tools-category\">\n              <div class=\"tools-category__header\">\n                <span class=\"tools-category__icon\"><svg height=\"18\" width=\"18\"></svg></span>\n                <span class=\"tools-category__name\">Activity</span>\n                <span class=\"tools-category__count\">1</span>\n              </div>\n              <div class=\"tools-category__list\">\n                \n      <div data-action=\"executeTool\" data-category=\"Activity\" data-tool=\"get_sync_history\" class=\"tool-item\">\n        <span class=\"tool-item__icon\">\ud83d\udcdc</span>\n        <div class=\"tool-item__info\">\n          <div class=\"tool-item__name\">get sync history</div>\n          <div class=\"tool-item__desc\">Get token sync history</div>\n        </div>\n        <span class=\"tool-item__params\">1p</span>\n        <svg height=\"16\" width=\"16\" class=\"tool-item__action\"></svg>\n      </div>\n    \n              </div>\n            </div>\n          \n      </div>\n\n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373841,
      "relativeTime": 44580,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering quick wins page",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373843,
      "relativeTime": 44582,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering quick wins page",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373846,
      "relativeTime": 44585,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering quick wins page",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116373847,
      "relativeTime": 44586,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [UI] Rendering quick wins page color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [UI] Rendering quick wins page",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116374263,
      "relativeTime": 45002,
      "level": "info",
      "category": "snapshot",
      "message": "State Capture (navigation)",
      "data": {
        "trigger": "navigation",
        "details": {
          "from": "https://dss.overbits.luz.uy/admin-ui/index.html#services",
          "to": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins"
        },
        "snapshot": {
          "timestamp": 1765116374262,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/layout.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: calc(100vh - 57px);\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 57px;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    /* AI Toggle button active state in header */\n    #sidebar-toggle[aria-expanded=\"false\"] {\n      opacity: 0.6;\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" id=\"main-nav\" aria-label=\"Main navigation\">\n        <!-- Overview -->\n        <div class=\"nav-section__title\">Overview</div>\n        <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n          </svg>\n          Dashboard\n        </a>\n        <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n          <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M3 3h18v18H3z\"></path>\n            <path d=\"M21 9H3\"></path>\n            <path d=\"M9 21V9\"></path>\n          </svg>\n          Projects\n        </a>\n\n        <!-- Tools -->\n        <details class=\"nav-group\" id=\"nav-group-tools\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n              </svg>\n              Tools\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-analysis\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Analysis\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"services\" href=\"#services\" tabindex=\"0\">Services</a>\n                <a class=\"nav-item nav-item--level-2 active\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">Quick Wins</a>\n              </div>\n            </details>\n            <a class=\"nav-item nav-item--level-1\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">Chat</a>\n          </div>\n        </details>\n\n        <!-- Design System -->\n        <details class=\"nav-group\" id=\"nav-group-design-system\" open=\"\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n                <path d=\"M2 17l10 5 10-5\"></path>\n                <path d=\"M2 12l10 5 10-5\"></path>\n              </svg>\n              Design System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-foundations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Foundations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">Tokens</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"components\" href=\"#components\" tabindex=\"0\">Components</a>\n              </div>\n            </details>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-integrations\" open=\"\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Integrations\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">Figma</a>\n                <a id=\"storybook-link\" class=\"nav-item nav-item--level-2\" href=\"https://localhost/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://localhost/storybook/\" style=\"pointer-events: auto; opacity: 1;\">Storybook</a>\n              </div>\n            </details>\n          </div>\n        </details>\n\n        <!-- System -->\n        <details class=\"nav-group\" id=\"nav-group-system\">\n          <summary>\n            <div class=\"nav-item\" tabindex=\"0\">\n              <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path>\n              </svg>\n              System\n              <svg class=\"nav-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </div>\n          </summary>\n          <div class=\"nav-group__content\">\n            <a class=\"nav-item nav-item--level-1\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">Docs</a>\n            <details class=\"nav-sub-group\" id=\"nav-sub-group-administration\">\n              <summary>\n                <div class=\"nav-item nav-item--level-1\" tabindex=\"0\">\n                  Administration\n                  <svg class=\"nav-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n                </div>\n              </summary>\n              <div class=\"nav-sub-group__content\">\n                <a class=\"nav-item nav-item--level-2\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">Teams</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">Audit</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">Plugins</a>\n                <a class=\"nav-item nav-item--level-2\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">Settings</a>\n              </div>\n            </details>\n          </div>\n        </details>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &amp; sync tokens</li>\n                <li>Use AI chat for help</li>\n              </ol>\n            </div>\n          </div>\n        </details>\n      </div>\n      <div class=\"sidebar__footer\">\n        <ds-badge data-variant=\"outline\">v1.0.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"notification-toggle-container\" style=\"position: relative;\">\n          <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"notification-toggle\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n              <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n            </svg>\n          </ds-button>\n          <span id=\"notification-indicator\" class=\"status-dot status-dot--error\" style=\"position: absolute; top: 6px; right: 6px; display: none;\"></span>\n          <ds-notification-center></ds-notification-center>\n        </div>\n        <ds-button data-variant=\"ghost\" data-size=\"icon\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"false\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>\u26a1 Quick Wins</h1>\n        <p class=\"text-muted\">Actionable improvements to empower your team</p>\n      </div>\n\n      <div class=\"card p-4 mb-6\">\n        <div class=\"flex gap-4\">\n          <input class=\"input flex-1\" value=\".\" placeholder=\"Project path (default: .)\" id=\"projectPath\" type=\"text\">\n          <button data-action=\"loadQuickWins\" class=\"btn btn-primary\">\n            \ud83d\udd0d Analyze Project\n          </button>\n        </div>\n      </div>\n\n      <div id=\"quickWinsContainer\">\n        <div class=\"text-center text-muted py-8\">\n          <p>Click \"Analyze Project\" to discover quick wins</p>\n        </div>\n      </div>\n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n    </main>\n  </div>\n\n  <!-- Toast Provider for notifications -->\n  <ds-toast-provider></ds-toast-provider>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/components/ds-action-bar.js';\n    import '/admin-ui/js/components/ds-toast.js';\n    import '/admin-ui/js/components/ds-toast-provider.js';\n    import '/admin-ui/js/components/ds-notification-center.js';\n    import '/admin-ui/js/components/ds-workflow.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import stores and services\n    import contextStore from '/admin-ui/js/stores/context-store.js';\n    import notificationService from '/admin-ui/js/services/notification-service.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import navigation manager\n    import NavigationManager from '/admin-ui/js/core/navigation.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Initialize navigation manager\n      new NavigationManager(document.querySelector('.sidebar__nav'));\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n        contextStore.setContext({ team: savedTeam });\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          contextStore.setContext({ team });\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', 'false');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.setAttribute('aria-expanded', !isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n\n      // Setup Notification Center toggle\n      const notificationToggle = document.getElementById('notification-toggle');\n      const notificationCenter = document.querySelector('ds-notification-center');\n      const notificationIndicator = document.getElementById('notification-indicator');\n\n      if (notificationToggle && notificationCenter) {\n        notificationToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const isOpen = notificationCenter.hasAttribute('open');\n          if (isOpen) {\n            notificationCenter.removeAttribute('open');\n          } else {\n            notificationCenter.setAttribute('open', '');\n          }\n        });\n\n        // Close when clicking outside\n        document.addEventListener('click', (e) => {\n          if (!notificationCenter.contains(e.target) && !notificationToggle.contains(e.target)) {\n            notificationCenter.removeAttribute('open');\n          }\n        });\n\n        // Update unread indicator\n        notificationService.addEventListener('unread-count-changed', (e) => {\n          const { count } = e.detail;\n          if (notificationIndicator) {\n            notificationIndicator.style.display = count > 0 ? 'block' : 'none';\n          }\n        });\n\n        // Handle notification actions\n        notificationCenter.addEventListener('notification-action', (e) => {\n          const { event, payload } = e.detail;\n          console.log('Notification action:', event, payload);\n          // Handle navigation or other actions based on event type\n          if (event.startsWith('navigate:')) {\n            const page = event.replace('navigate:', '');\n            window.location.hash = page;\n          }\n        });\n      }\n\n      // Listen for \"Ask AI\" events from anywhere in the app\n      window.addEventListener('dss-ask-ai', (e) => {\n        const { prompt, openSidebar } = e.detail;\n        if (openSidebar && aiSidebar && aiSidebar.classList.contains('collapsed')) {\n          aiSidebar.classList.remove('collapsed');\n          sidebarToggle?.setAttribute('aria-expanded', 'true');\n          localStorage.setItem('dss_ai_sidebar_collapsed', 'false');\n        }\n        // The ds-ai-chat component should handle the prompt\n        const aiChat = document.querySelector('ds-ai-chat');\n        if (aiChat && typeof aiChat.setInput === 'function') {\n          aiChat.setInput(prompt);\n        }\n      });\n\n      // Update context store on page navigation\n      window.addEventListener('hashchange', () => {\n        const page = window.location.hash.substring(1) || 'dashboard';\n        contextStore.setContext({ page });\n      });\n      // Set initial page\n      contextStore.setContext({ page: window.location.hash.substring(1) || 'dashboard' });\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1403,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116391482,
      "relativeTime": 62221,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 54 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 54 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116391533,
      "relativeTime": 62272,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 1356,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116391700,
      "relativeTime": 62439,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 198.19999998807907,
        "transferSize": 582,
        "encodedBodySize": 282,
        "decodedBodySize": 282
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116421469,
      "relativeTime": 92208,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 57 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 57 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116421521,
      "relativeTime": 92260,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 1343.7999999821186,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116422315,
      "relativeTime": 93054,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 195,
        "transferSize": 582,
        "encodedBodySize": 282,
        "decodedBodySize": 282
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116451462,
      "relativeTime": 122201,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 60 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 60 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116451514,
      "relativeTime": 122253,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 1336,
        "transferSize": 442,
        "encodedBodySize": 142,
        "decodedBodySize": 142
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765116452324,
      "relativeTime": 123063,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 203.7000000178814,
        "transferSize": 582,
        "encodedBodySize": 282,
        "decodedBodySize": 282
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    }
  ],
  "diagnostic": {
    "sessionId": "session-1765116329261-m4qapuckd",
    "uptime": 150857,
    "totalLogs": 63,
    "errorCount": 0,
    "warnCount": 1,
    "networkRequests": 20,
    "memory": {
      "usedJSHeapSize": 7603738,
      "jsHeapSizeLimit": 4294967296,
      "usagePercent": "0.18"
    },
    "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36",
    "recentErrors": [],
    "recentNetworkRequests": [
      {
        "timestamp": 1765116452324,
        "relativeTime": 123063,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/health",
        "data": {
          "url": "https://dss.overbits.luz.uy/health",
          "initiatorType": "fetch",
          "duration": 203.7000000178814,
          "transferSize": 582,
          "encodedBodySize": 282,
          "decodedBodySize": 282
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765116451514,
        "relativeTime": 122253,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
        "data": {
          "url": "https://dss.overbits.luz.uy/api/browser-logs",
          "initiatorType": "fetch",
          "duration": 1336,
          "transferSize": 442,
          "encodedBodySize": 142,
          "decodedBodySize": 142
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765116422315,
        "relativeTime": 93054,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/health",
        "data": {
          "url": "https://dss.overbits.luz.uy/health",
          "initiatorType": "fetch",
          "duration": 195,
          "transferSize": 582,
          "encodedBodySize": 282,
          "decodedBodySize": 282
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765116421521,
        "relativeTime": 92260,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
        "data": {
          "url": "https://dss.overbits.luz.uy/api/browser-logs",
          "initiatorType": "fetch",
          "duration": 1343.7999999821186,
          "transferSize": 442,
          "encodedBodySize": 142,
          "decodedBodySize": 142
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765116391700,
        "relativeTime": 62439,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/health",
        "data": {
          "url": "https://dss.overbits.luz.uy/health",
          "initiatorType": "fetch",
          "duration": 198.19999998807907,
          "transferSize": 582,
          "encodedBodySize": 282,
          "decodedBodySize": 282
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#quick-wins",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      }
    ]
  }
}