{
  "sessionId": "session-1765033676969-46h7j01a7",
  "exportedAt": "2025-12-06T15:09:27.882Z",
  "logs": [
    {
      "timestamp": 1765033676969,
      "relativeTime": 0,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Initializing application... color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Initializing application...",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033676975,
      "relativeTime": 6,
      "level": "metric",
      "category": "performance",
      "message": "Page load completed",
      "data": {
        "domContentLoaded": 0.29999998211860657,
        "loadComplete": 0,
        "totalTime": 237,
        "dnsLookup": 0,
        "tcpConnection": 0,
        "requestTime": 191.59999999403954,
        "responseTime": 0.800000011920929,
        "renderTime": null
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677274,
      "relativeTime": 305,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects",
        "initiatorType": "fetch",
        "duration": 304.2999999821186,
        "transferSize": 527,
        "encodedBodySize": 227,
        "decodedBodySize": 227
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677274,
      "relativeTime": 305,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/config",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/config",
        "initiatorType": "fetch",
        "duration": 301.80000001192093,
        "transferSize": 371,
        "encodedBodySize": 71,
        "decodedBodySize": 71
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677274,
      "relativeTime": 305,
      "level": "log",
      "category": "console",
      "message": "[ConfigLoader] Configuration loaded successfully [object Object]",
      "data": {
        "args": [
          "[ConfigLoader] Configuration loaded successfully",
          {
            "dssHost": "dss.overbits.luz.uy",
            "dssPort": "3456",
            "storybookPort": 6006
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677275,
      "relativeTime": 306,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Server configuration loaded color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Server configuration loaded",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677275,
      "relativeTime": 306,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0 color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [PluginService] Registered plugin: Claude AI Assistant v1.0.0",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677275,
      "relativeTime": 306,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing... color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initializing...",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677275,
      "relativeTime": 306,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [Plugin:Claude AI Assistant] Claude plugin initialized",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677275,
      "relativeTime": 306,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Plugins initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Plugins initialized",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677276,
      "relativeTime": 307,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Messaging system initialized color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Messaging system initialized",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677280,
      "relativeTime": 311,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Router initialized with 12 routes color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Router initialized with 12 routes",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677280,
      "relativeTime": 311,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [PluginService] Initialized plugin: Claude AI Assistant",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677474,
      "relativeTime": 505,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 192.19999998807907,
        "transferSize": 582,
        "encodedBodySize": 282,
        "decodedBodySize": 282
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677668,
      "relativeTime": 699,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/config",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/config",
        "initiatorType": "fetch",
        "duration": 190.2999999821186,
        "transferSize": 371,
        "encodedBodySize": 71,
        "decodedBodySize": 71
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677670,
      "relativeTime": 701,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/config/figma",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/config/figma",
        "initiatorType": "fetch",
        "duration": 193.90000000596046,
        "transferSize": 475,
        "encodedBodySize": 175,
        "decodedBodySize": 175
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033677763,
      "relativeTime": 794,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/services",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/services",
        "initiatorType": "fetch",
        "duration": 284.5,
        "transferSize": 848,
        "encodedBodySize": 548,
        "decodedBodySize": 548
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678121,
      "relativeTime": 1152,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/discovery/scan",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/discovery/scan",
        "initiatorType": "fetch",
        "duration": 356.40000000596046,
        "transferSize": 834,
        "encodedBodySize": 534,
        "decodedBodySize": 534
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678325,
      "relativeTime": 1356,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/discovery/stats",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/discovery/stats",
        "initiatorType": "fetch",
        "duration": 201.10000002384186,
        "transferSize": 433,
        "encodedBodySize": 133,
        "decodedBodySize": 133
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678525,
      "relativeTime": 1556,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/discovery/activity",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/discovery/activity",
        "initiatorType": "fetch",
        "duration": 197.5,
        "transferSize": 3740,
        "encodedBodySize": 3440,
        "decodedBodySize": 3440
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678721,
      "relativeTime": 1752,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Loading dashboard data color: #2196F3; font-weight: bold [object Object]",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Loading dashboard data",
          "color: #2196F3; font-weight: bold",
          {
            "projectId": "proj-1764991776412"
          }
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678728,
      "relativeTime": 1759,
      "level": "log",
      "category": "console",
      "message": "%c\ud83d\udcad [App] Application initialized successfully color: #2196F3; font-weight: bold",
      "data": {
        "args": [
          "%c\ud83d\udcad [App] Application initialized successfully",
          "color: #2196F3; font-weight: bold"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678732,
      "relativeTime": 1763,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects",
        "initiatorType": "fetch",
        "duration": 192.2999999821186,
        "transferSize": 527,
        "encodedBodySize": 227,
        "decodedBodySize": 227
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033678925,
      "relativeTime": 1956,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/projects/proj-1764991776412/dashboard/summary",
        "initiatorType": "fetch",
        "duration": 197.90000000596046,
        "transferSize": 668,
        "encodedBodySize": 368,
        "decodedBodySize": 368
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033682674,
      "relativeTime": 5705,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 24 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 24 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033682726,
      "relativeTime": 5757,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 702.5999999940395,
        "transferSize": 443,
        "encodedBodySize": 143,
        "decodedBodySize": 143
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033687971,
      "relativeTime": 11002,
      "level": "info",
      "category": "snapshot",
      "message": "Navigation detected",
      "data": {
        "trigger": "navigation",
        "from": "https://dss.overbits.luz.uy/admin-ui/index.html#settings",
        "to": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
        "snapshot": {
          "timestamp": 1765033687971,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: 100vh;\n      min-height: 100vh;\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    .sidebar-toggle {\n      position: fixed;\n      right: 320px;\n      bottom: 20px;\n      z-index: 49;\n      width: 48px;\n      height: 48px;\n      background: var(--card);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--muted-foreground);\n      transition: right 0.2s ease, background 0.15s;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .sidebar-toggle:hover {\n      background: var(--accent);\n      color: var(--foreground);\n    }\n\n    .sidebar-toggle.collapsed {\n      right: 0;\n    }\n\n    .sidebar-toggle svg {\n      transition: transform 0.2s ease;\n    }\n\n    .sidebar-toggle.collapsed svg {\n      transform: rotate(180deg);\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" aria-label=\"Main navigation\">\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Overview</div>\n          <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            </svg>\n            Dashboard\n          </a>\n          <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M3 3h18v18H3z\"></path>\n              <path d=\"M21 9H3\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Projects\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <a class=\"nav-item\" data-page=\"services\" href=\"#services\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n            </svg>\n            Services\n          </a>\n          <a class=\"nav-item\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon>\n            </svg>\n            Quick Wins\n          </a>\n          <a class=\"nav-item\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n            </svg>\n            Chat\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <a class=\"nav-item\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"4\"></circle>\n            </svg>\n            Tokens\n          </a>\n          <a class=\"nav-item\" data-page=\"components\" href=\"#components\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n              <path d=\"M3 9h18\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Components\n          </a>\n          <a class=\"nav-item\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\"></path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\"></path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\"></path>\n            </svg>\n            Figma\n          </a>\n          <a id=\"storybook-link\" class=\"nav-item\" href=\"https://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/storybook/\" style=\"pointer-events: auto; opacity: 1;\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>\n              <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>\n            </svg>\n            Storybook\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <a class=\"nav-item\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"></path>\n              <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"></path>\n            </svg>\n            Docs\n          </a>\n          <a class=\"nav-item\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n            </svg>\n            Teams\n          </a>\n          <a class=\"nav-item\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n              <polyline points=\"14 2 14 8 20 8\"></polyline>\n              <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\n              <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\n              <polyline points=\"10 9 9 9 8 9\"></polyline>\n            </svg>\n            Audit Log\n          </a>\n          <a class=\"nav-item active\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Plugins\n          </a>\n          <a class=\"nav-item\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Settings\n          </a>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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 variant=\"outline\" dot=\"\">v0.8.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n            <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>Plugins</h1>\n        <p class=\"text-muted\">1 of 1 plugins enabled</p>\n      </div>\n\n      <div class=\"plugins-grid\">\n        \n      <div data-plugin-id=\"claude-ai\" class=\"plugin-card enabled\">\n        <div class=\"plugin-card__header\">\n          <div class=\"plugin-card__icon\">\ud83e\udd16</div>\n          <div class=\"plugin-card__title\">\n            <div class=\"plugin-card__name\">Claude AI Assistant</div>\n            <div class=\"plugin-card__version\">v1.0.0</div>\n          </div>\n          <div data-plugin=\"claude-ai\" data-action=\"togglePlugin\" class=\"plugin-toggle enabled\">\n          </div>\n        </div>\n        <div class=\"plugin-card__desc\">Enhanced Claude AI integration for design system workflows</div>\n        \n          <div class=\"plugin-card__settings\">\n            \n        <div class=\"plugin-setting\">\n          <span class=\"plugin-setting__label\">Claude Model</span>\n          \n            \n              Claude 3 Sonnet (Fast)\n            \n              Claude 3 Opus (Advanced)\n            \n              Claude 3 Haiku (Quick)\n            \n          \n        </div>\n      \n        <div class=\"plugin-setting\">\n          <span class=\"plugin-setting__label\">Auto-suggest improvements</span>\n          <div data-type=\"boolean\" data-key=\"autoSuggest\" data-plugin=\"claude-ai\" data-action=\"setPluginSetting\" class=\"plugin-toggle enabled\">\n          </div>\n        </div>\n      \n        <div class=\"plugin-setting\">\n          <span class=\"plugin-setting__label\">Context Depth</span>\n          \n            \n              Minimal\n            \n              Standard\n            \n              Deep Analysis\n            \n          \n        </div>\n      \n          </div>\n        \n        <div class=\"plugin-card__meta\">\n          <span class=\"plugin-card__author\">by DSS Team</span>\n          \n            Enabled\n          \n        </div>\n      </div>\n    \n      </div>\n\n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n      <button class=\"sidebar-toggle collapsed\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"true\">\n        <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M9 18l6-6-6-6\"></path>\n        </svg>\n      </button>\n    </main>\n  </div>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.classList.add('collapsed');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.classList.toggle('collapsed', isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1244,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033689970,
      "relativeTime": 13001,
      "level": "info",
      "category": "snapshot",
      "message": "Navigation detected",
      "data": {
        "trigger": "navigation",
        "from": "https://dss.overbits.luz.uy/admin-ui/index.html#plugins",
        "to": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
        "snapshot": {
          "timestamp": 1765033689970,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: 100vh;\n      min-height: 100vh;\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    .sidebar-toggle {\n      position: fixed;\n      right: 320px;\n      bottom: 20px;\n      z-index: 49;\n      width: 48px;\n      height: 48px;\n      background: var(--card);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--muted-foreground);\n      transition: right 0.2s ease, background 0.15s;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .sidebar-toggle:hover {\n      background: var(--accent);\n      color: var(--foreground);\n    }\n\n    .sidebar-toggle.collapsed {\n      right: 0;\n    }\n\n    .sidebar-toggle svg {\n      transition: transform 0.2s ease;\n    }\n\n    .sidebar-toggle.collapsed svg {\n      transform: rotate(180deg);\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" aria-label=\"Main navigation\">\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Overview</div>\n          <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            </svg>\n            Dashboard\n          </a>\n          <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M3 3h18v18H3z\"></path>\n              <path d=\"M21 9H3\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Projects\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <a class=\"nav-item\" data-page=\"services\" href=\"#services\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n            </svg>\n            Services\n          </a>\n          <a class=\"nav-item\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon>\n            </svg>\n            Quick Wins\n          </a>\n          <a class=\"nav-item\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n            </svg>\n            Chat\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <a class=\"nav-item\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"4\"></circle>\n            </svg>\n            Tokens\n          </a>\n          <a class=\"nav-item\" data-page=\"components\" href=\"#components\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n              <path d=\"M3 9h18\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Components\n          </a>\n          <a class=\"nav-item\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\"></path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\"></path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\"></path>\n            </svg>\n            Figma\n          </a>\n          <a id=\"storybook-link\" class=\"nav-item\" href=\"https://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/storybook/\" style=\"pointer-events: auto; opacity: 1;\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>\n              <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>\n            </svg>\n            Storybook\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <a class=\"nav-item\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"></path>\n              <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"></path>\n            </svg>\n            Docs\n          </a>\n          <a class=\"nav-item\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n            </svg>\n            Teams\n          </a>\n          <a class=\"nav-item active\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n              <polyline points=\"14 2 14 8 20 8\"></polyline>\n              <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\n              <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\n              <polyline points=\"10 9 9 9 8 9\"></polyline>\n            </svg>\n            Audit Log\n          </a>\n          <a class=\"nav-item\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Plugins\n          </a>\n          <a class=\"nav-item\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Settings\n          </a>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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 variant=\"outline\" dot=\"\">v0.8.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n            <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>Audit Log</h1>\n        <p class=\"text-muted\">History of all user actions and system events</p>\n      </div>\n\n      \n      <div class=\"mt-6\">\n        \n          \n            Filters\n          \n          \n            <div class=\"grid grid-cols-4 gap-4\">\n              <div>\n                Category\n                \n                  All Categories\n                  Design System\n                  Code\n                  Configuration\n                  Project\n                  Team\n                  Storybook\n                \n              </div>\n\n              <div>\n                Severity\n                \n                  All Severities\n                  Info\n                  Warning\n                  Critical\n                \n              </div>\n\n              <div>\n                Start Date\n                <input class=\"w-full mt-2 p-2 rounded border\" id=\"audit-start-date\" type=\"date\">\n              </div>\n\n              <div>\n                End Date\n                <input class=\"w-full mt-2 p-2 rounded border\" id=\"audit-end-date\" type=\"date\">\n              </div>\n            </div>\n\n            <div class=\"flex gap-3 mt-4\">\n              \n                Apply Filters\n              \n              \n                Clear Filters\n              \n              \n                \ud83d\udce5 Export JSON\n              \n              \n                \ud83d\udce5 Export CSV\n              \n            </div>\n          \n        \n      </div>\n\n      \n      <div class=\"mt-6\">\n        \n          \n            Activity History\n            \n              <span id=\"audit-total-count\">Loading...</span>\n            \n          \n          \n            <div id=\"audit-log-content\">\n              <div class=\"text-center py-8 text-muted\">\n                Loading audit log...\n              </div>\n            </div>\n\n            \n            <div style=\"display: none;\" id=\"audit-pagination\" class=\"flex justify-between items-center mt-6\">\n              <div class=\"text-sm text-muted\">\n                Showing <span id=\"audit-showing\"></span> of <span id=\"audit-total\"></span> entries\n              </div>\n              <div class=\"flex gap-2\">\n                \n                  Previous\n                \n                \n                  Next\n                \n              </div>\n            </div>\n          \n        \n      </div>\n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n      <button class=\"sidebar-toggle collapsed\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"true\">\n        <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M9 18l6-6-6-6\"></path>\n        </svg>\n      </button>\n    </main>\n  </div>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.classList.add('collapsed');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.classList.toggle('collapsed', isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1244,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033690272,
      "relativeTime": 13303,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 195.90000000596046,
        "transferSize": 740,
        "encodedBodySize": 440,
        "decodedBodySize": 440
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033690470,
      "relativeTime": 13501,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 390.19999998807907,
        "transferSize": 740,
        "encodedBodySize": 440,
        "decodedBodySize": 440
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033690665,
      "relativeTime": 13696,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 587.5,
        "transferSize": 740,
        "encodedBodySize": 440,
        "decodedBodySize": 440
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033690866,
      "relativeTime": 13897,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "initiatorType": "fetch",
        "duration": 788.6000000238419,
        "transferSize": 740,
        "encodedBodySize": 440,
        "decodedBodySize": 440
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033698258,
      "relativeTime": 21289,
      "level": "log",
      "category": "console",
      "message": "Show audit details for: 50",
      "data": {
        "args": [
          "Show audit details for:",
          50
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033699970,
      "relativeTime": 23001,
      "level": "info",
      "category": "snapshot",
      "message": "Navigation detected",
      "data": {
        "trigger": "navigation",
        "from": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
        "to": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
        "snapshot": {
          "timestamp": 1765033699970,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: 100vh;\n      min-height: 100vh;\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    .sidebar-toggle {\n      position: fixed;\n      right: 320px;\n      bottom: 20px;\n      z-index: 49;\n      width: 48px;\n      height: 48px;\n      background: var(--card);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--muted-foreground);\n      transition: right 0.2s ease, background 0.15s;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .sidebar-toggle:hover {\n      background: var(--accent);\n      color: var(--foreground);\n    }\n\n    .sidebar-toggle.collapsed {\n      right: 0;\n    }\n\n    .sidebar-toggle svg {\n      transition: transform 0.2s ease;\n    }\n\n    .sidebar-toggle.collapsed svg {\n      transform: rotate(180deg);\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" aria-label=\"Main navigation\">\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Overview</div>\n          <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            </svg>\n            Dashboard\n          </a>\n          <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M3 3h18v18H3z\"></path>\n              <path d=\"M21 9H3\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Projects\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <a class=\"nav-item\" data-page=\"services\" href=\"#services\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n            </svg>\n            Services\n          </a>\n          <a class=\"nav-item\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon>\n            </svg>\n            Quick Wins\n          </a>\n          <a class=\"nav-item\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n            </svg>\n            Chat\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <a class=\"nav-item\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"4\"></circle>\n            </svg>\n            Tokens\n          </a>\n          <a class=\"nav-item\" data-page=\"components\" href=\"#components\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n              <path d=\"M3 9h18\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Components\n          </a>\n          <a class=\"nav-item\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\"></path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\"></path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\"></path>\n            </svg>\n            Figma\n          </a>\n          <a id=\"storybook-link\" class=\"nav-item\" href=\"https://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/storybook/\" style=\"pointer-events: auto; opacity: 1;\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>\n              <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>\n            </svg>\n            Storybook\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <a class=\"nav-item\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"></path>\n              <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"></path>\n            </svg>\n            Docs\n          </a>\n          <a class=\"nav-item active\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n            </svg>\n            Teams\n          </a>\n          <a class=\"nav-item\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n              <polyline points=\"14 2 14 8 20 8\"></polyline>\n              <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\n              <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\n              <polyline points=\"10 9 9 9 8 9\"></polyline>\n            </svg>\n            Audit Log\n          </a>\n          <a class=\"nav-item\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Plugins\n          </a>\n          <a class=\"nav-item\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Settings\n          </a>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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 variant=\"outline\" dot=\"\">v0.8.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n            <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>Team Management</h1>\n        <p class=\"text-muted\">Manage teams and permissions</p>\n      </div>\n\n      <div class=\"flex gap-3 mt-6 mb-4\">\n        \n      </div>\n\n      <div class=\"grid grid-cols-3 gap-4 mt-4\">\n        \n          \n            Design System Core\n            Active\n          \n          \n            <div class=\"flex flex-col gap-2 text-sm\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Members:</span>\n                <span>5</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Projects:</span>\n                <span>3</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Your Role:</span>\n                TEAM_LEAD\n              </div>\n            </div>\n          \n          \n            View Details\n          \n        \n\n        \n          \n            Product Team A\n            Member\n          \n          \n            <div class=\"flex flex-col gap-2 text-sm\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Members:</span>\n                <span>8</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted\">Projects:</span>\n                <span>2</span>\n              </div>\n            </div>\n          \n          \n            View Details\n          \n        \n      </div>\n\n      \n        \n          Role Permissions\n        \n        \n          <div class=\"grid grid-cols-4 gap-4 text-sm\">\n            <div>\n              <h4 class=\"font-medium mb-2\">Super Admin</h4>\n              <p class=\"text-muted\">Full system access</p>\n            </div>\n            <div>\n              <h4 class=\"font-medium mb-2\">Team Lead</h4>\n              <p class=\"text-muted\">Manage team, sync, generate</p>\n            </div>\n            <div>\n              <h4 class=\"font-medium mb-2\">Developer</h4>\n              <p class=\"text-muted\">Read, write, sync</p>\n            </div>\n            <div>\n              <h4 class=\"font-medium mb-2\">Viewer</h4>\n              <p class=\"text-muted\">Read-only access</p>\n            </div>\n          </div>\n        \n      \n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n      <button class=\"sidebar-toggle collapsed\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"true\">\n        <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M9 18l6-6-6-6\"></path>\n        </svg>\n      </button>\n    </main>\n  </div>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.classList.add('collapsed');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.classList.toggle('collapsed', isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1244,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033703970,
      "relativeTime": 27001,
      "level": "info",
      "category": "snapshot",
      "message": "Navigation detected",
      "data": {
        "trigger": "navigation",
        "from": "https://dss.overbits.luz.uy/admin-ui/index.html#teams",
        "to": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
        "snapshot": {
          "timestamp": 1765033703970,
          "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
          "html": "<html lang=\"en\" class=\"light\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Design System Server</title>\n  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/admin-ui/favicon.svg\">\n\n  <!-- Design System Styles -->\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/tokens.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/base.css\">\n  <link rel=\"stylesheet\" href=\"/admin-ui/css/components.css\">\n\n  <!-- Markdown & Syntax Highlighting -->\n  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js\"></script>\n\n  <style>\n    /* App Layout */\n    .app-layout {\n      display: grid;\n      grid-template-columns: 240px 1fr;\n      grid-template-rows: auto 1fr;\n      min-height: 100vh;\n    }\n\n    /* Sidebar */\n    .sidebar {\n      grid-row: 1 / -1;\n      background: var(--card);\n      border-right: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .sidebar__header {\n      padding: var(--space-4) var(--space-5);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .sidebar__logo {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      font-weight: var(--font-semibold);\n      font-size: var(--text-lg);\n      color: var(--foreground);\n    }\n\n    .sidebar__logo-icon {\n      width: 2rem;\n      height: 2rem;\n      background: var(--primary);\n      border-radius: var(--radius);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--primary-foreground);\n    }\n\n    .sidebar__nav {\n      flex: 1;\n      padding: var(--space-4);\n    }\n\n    .nav-section {\n      margin-bottom: var(--space-6);\n    }\n\n    .nav-section__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n      padding: 0 var(--space-3);\n    }\n\n    .nav-item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      padding: var(--space-2) var(--space-3);\n      border-radius: var(--radius);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      font-size: var(--text-sm);\n      transition: all var(--duration-fast) var(--ease-default);\n      cursor: pointer;\n    }\n\n    .nav-item:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n      text-decoration: none;\n    }\n\n    .nav-item.active {\n      background: var(--primary);\n      color: var(--primary-foreground);\n    }\n\n    .nav-item__icon {\n      width: 1.25rem;\n      height: 1.25rem;\n      opacity: 0.7;\n    }\n\n    .nav-item.active .nav-item__icon {\n      opacity: 1;\n    }\n\n    .sidebar__help {\n      padding: var(--space-3);\n      border-top: 1px solid var(--border);\n    }\n\n    .help-panel {\n      font-size: var(--text-xs);\n    }\n\n    .help-panel__toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      cursor: pointer;\n      color: var(--muted-foreground);\n      padding: var(--space-2);\n      border-radius: var(--radius);\n      list-style: none;\n    }\n\n    .help-panel__toggle:hover {\n      background: var(--accent);\n      color: var(--accent-foreground);\n    }\n\n    .help-panel__toggle::-webkit-details-marker {\n      display: none;\n    }\n\n    .help-panel__content {\n      padding: var(--space-2) var(--space-3);\n    }\n\n    .help-section {\n      margin-bottom: var(--space-3);\n    }\n\n    .help-section strong {\n      color: var(--foreground);\n      font-size: var(--text-xs);\n    }\n\n    .help-section ul, .help-section ol {\n      margin: var(--space-1) 0 0 var(--space-4);\n      padding: 0;\n      color: var(--muted-foreground);\n    }\n\n    .help-section li {\n      margin-bottom: 2px;\n    }\n\n    .sidebar__footer {\n      padding: var(--space-4);\n      border-top: 1px solid var(--border);\n    }\n\n    /* Header */\n    .app-header {\n      display: flex;\n      align-items: center;\n      gap: var(--space-4);\n      padding: var(--space-4) var(--space-6);\n      background: var(--card);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .app-header__project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n    }\n\n    .project-selector {\n      display: flex;\n      align-items: center;\n      gap: var(--space-2);\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      font-size: var(--text-sm);\n      width: 200px;\n    }\n\n    .project-selector__label {\n      font-weight: var(--font-medium);\n      color: var(--muted-foreground);\n      font-size: var(--text-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-selector__select {\n      flex: 1;\n      background: transparent;\n      border: none;\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      font-weight: var(--font-medium);\n      outline: none;\n      cursor: pointer;\n      padding: var(--space-1) 0;\n    }\n\n    .project-selector__select option {\n      background: var(--popover);\n      color: var(--popover-foreground);\n    }\n\n    .project-selector__icon {\n      width: 16px;\n      height: 16px;\n      color: var(--primary);\n    }\n\n    .app-header__team-selector {\n      display: flex;\n      align-items: center;\n    }\n\n    .team-select {\n      padding: var(--space-2) var(--space-3);\n      background: var(--muted);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      color: var(--foreground);\n      font-size: var(--text-sm);\n      cursor: pointer;\n      width: 200px;\n    }\n\n    .team-select:focus {\n      outline: none;\n      border-color: var(--ring);\n    }\n\n    .app-header__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--space-3);\n      margin-left: auto;\n    }\n\n    /* Main Content */\n    .app-main {\n      display: grid;\n      grid-template-columns: 1fr;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .app-content {\n      padding: var(--space-6);\n      padding-right: 340px;\n      overflow-y: auto;\n    }\n\n    .app-sidebar {\n      width: 320px;\n      height: 100vh;\n      min-height: 100vh;\n      border-left: 1px solid var(--border);\n      background: var(--card);\n      display: flex;\n      flex-direction: column;\n      transition: width 0.2s ease, transform 0.2s ease;\n      position: fixed;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: 50;\n    }\n\n    .app-sidebar.collapsed {\n      width: 0;\n      overflow: hidden;\n      border-left: none;\n    }\n\n    .sidebar-toggle {\n      position: fixed;\n      right: 320px;\n      bottom: 20px;\n      z-index: 49;\n      width: 48px;\n      height: 48px;\n      background: var(--card);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--muted-foreground);\n      transition: right 0.2s ease, background 0.15s;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .sidebar-toggle:hover {\n      background: var(--accent);\n      color: var(--foreground);\n    }\n\n    .sidebar-toggle.collapsed {\n      right: 0;\n    }\n\n    .sidebar-toggle svg {\n      transition: transform 0.2s ease;\n    }\n\n    .sidebar-toggle.collapsed svg {\n      transform: rotate(180deg);\n    }\n\n    /* Page Header */\n    .page-header h1 {\n      font-size: var(--text-2xl);\n      margin-bottom: var(--space-1);\n    }\n\n    /* Docs Layout */\n    .docs-layout {\n      display: grid;\n      grid-template-columns: 200px 1fr;\n      gap: var(--space-6);\n      min-height: 0;\n    }\n\n    .docs-nav {\n      position: sticky;\n      top: 0;\n      height: fit-content;\n    }\n\n    .docs-nav__section {\n      margin-bottom: var(--space-4);\n    }\n\n    .docs-nav__title {\n      font-size: var(--text-xs);\n      font-weight: var(--font-semibold);\n      color: var(--muted-foreground);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: var(--space-2);\n    }\n\n    .docs-nav__link {\n      display: block;\n      padding: var(--space-1) var(--space-2);\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      text-decoration: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n    }\n\n    .docs-nav__link:hover {\n      color: var(--foreground);\n      background: var(--accent);\n    }\n\n    .docs-nav__link.active {\n      color: var(--primary);\n      background: var(--primary-light, oklch(0.65 0.18 250 / 0.1));\n    }\n\n    .docs-content {\n      max-width: 700px;\n    }\n\n    .docs-content h2 {\n      font-size: var(--text-xl);\n      font-weight: var(--font-semibold);\n      margin-bottom: var(--space-4);\n      padding-bottom: var(--space-2);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .docs-content h3 {\n      font-size: var(--text-base);\n      font-weight: var(--font-semibold);\n      margin: var(--space-4) 0 var(--space-2);\n    }\n\n    .docs-content p {\n      margin-bottom: var(--space-3);\n      line-height: 1.6;\n    }\n\n    .docs-content ul, .docs-content ol {\n      margin: 0 0 var(--space-3) var(--space-4);\n      line-height: 1.6;\n    }\n\n    .docs-content li {\n      margin-bottom: var(--space-1);\n    }\n\n    .docs-content pre {\n      background: var(--muted);\n      padding: var(--space-3);\n      border-radius: var(--radius);\n      overflow-x: auto;\n      margin-bottom: var(--space-3);\n      font-size: var(--text-sm);\n    }\n\n    .docs-content code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.9em;\n    }\n\n    .docs-content a {\n      color: var(--primary);\n    }\n\n    /* Stats */\n    .stat {\n      text-align: center;\n    }\n\n    .stat__label {\n      font-size: var(--text-sm);\n      color: var(--muted-foreground);\n      margin-bottom: var(--space-1);\n    }\n\n    .stat__value {\n      font-size: var(--text-2xl);\n      font-weight: var(--font-bold);\n    }\n\n    /* Status Dot */\n    .status-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: var(--radius-full);\n      background: var(--muted);\n    }\n\n    .status-dot--success { background: var(--success); }\n    .status-dot--warning { background: var(--warning); }\n    .status-dot--error { background: var(--destructive); }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .app-main {\n        grid-template-columns: 1fr;\n      }\n\n      .app-sidebar {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .app-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .sidebar {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div id=\"app\" class=\"app-layout\">\n    <!-- Sidebar -->\n    <aside class=\"sidebar\">\n      <div class=\"sidebar__header\">\n        <div class=\"sidebar__logo\">\n          <div class=\"sidebar__logo-icon\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2L2 7l10 5 10-5-10-5z\"></path>\n              <path d=\"M2 17l10 5 10-5\"></path>\n              <path d=\"M2 12l10 5 10-5\"></path>\n            </svg>\n          </div>\n          <span>DSS</span>\n        </div>\n      </div>\n\n      <nav class=\"sidebar__nav\" aria-label=\"Main navigation\">\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Overview</div>\n          <a class=\"nav-item\" data-page=\"dashboard\" href=\"#dashboard\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"></rect>\n            </svg>\n            Dashboard\n          </a>\n          <a class=\"nav-item\" data-page=\"projects\" href=\"#projects\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M3 3h18v18H3z\"></path>\n              <path d=\"M21 9H3\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Projects\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Tools</div>\n          <a class=\"nav-item\" data-page=\"services\" href=\"#services\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n              <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\n            </svg>\n            Services\n          </a>\n          <a class=\"nav-item\" data-page=\"quick-wins\" href=\"#quick-wins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon>\n            </svg>\n            Quick Wins\n          </a>\n          <a class=\"nav-item\" data-page=\"chat\" href=\"#chat\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n            </svg>\n            Chat\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">Design System</div>\n          <a class=\"nav-item\" data-page=\"tokens\" href=\"#tokens\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"4\"></circle>\n            </svg>\n            Tokens\n          </a>\n          <a class=\"nav-item\" data-page=\"components\" href=\"#components\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n              <path d=\"M3 9h18\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n            Components\n          </a>\n          <a class=\"nav-item\" data-page=\"figma\" href=\"#figma\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\"></path>\n              <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\"></path>\n              <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\"></path>\n              <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\"></path>\n            </svg>\n            Figma\n          </a>\n          <a id=\"storybook-link\" class=\"nav-item\" href=\"https://dss.overbits.luz.uy/storybook/\" target=\"_blank\" tabindex=\"0\" title=\"Open Storybook at https://dss.overbits.luz.uy/storybook/\" style=\"pointer-events: auto; opacity: 1;\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>\n              <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>\n            </svg>\n            Storybook\n          </a>\n        </div>\n\n        <div class=\"nav-section\">\n          <div class=\"nav-section__title\">System</div>\n          <a class=\"nav-item active\" data-page=\"docs\" href=\"#docs\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"></path>\n              <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"></path>\n            </svg>\n            Docs\n          </a>\n          <a class=\"nav-item\" data-page=\"teams\" href=\"#teams\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n              <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n            </svg>\n            Teams\n          </a>\n          <a class=\"nav-item\" data-page=\"audit\" href=\"#audit\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n              <polyline points=\"14 2 14 8 20 8\"></polyline>\n              <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\n              <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\n              <polyline points=\"10 9 9 9 8 9\"></polyline>\n            </svg>\n            Audit Log\n          </a>\n          <a class=\"nav-item\" data-page=\"plugins\" href=\"#plugins\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Plugins\n          </a>\n          <a class=\"nav-item\" data-page=\"settings\" href=\"#settings\" tabindex=\"0\">\n            <svg class=\"nav-item__icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            Settings\n          </a>\n        </div>\n      </nav>\n\n      <div class=\"sidebar__help\">\n        <details class=\"help-panel\">\n          <summary class=\"help-panel__toggle\" tabindex=\"0\">\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n            </svg>\n            Quick Guide\n          </summary>\n          <div class=\"help-panel__content\">\n            <div class=\"help-section\" data-team=\"ui\" style=\"display: none;\">\n              <strong>UI Team</strong>\n              <ul>\n                <li>Extract tokens from Figma</li>\n                <li>Sync to CSS variables</li>\n                <li>Generate components</li>\n                <li>Check token drift</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"ux\">\n              <strong>UX Team</strong>\n              <ul>\n                <li>Add Figma files to project</li>\n                <li>Run visual diff checks</li>\n                <li>Review token consistency</li>\n                <li>Validate components</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"qa\" style=\"display: none;\">\n              <strong>QA Team</strong>\n              <ul>\n                <li>Define ESRE test cases</li>\n                <li>Run component validation</li>\n                <li>Review visual regressions</li>\n                <li>Export audit logs</li>\n              </ul>\n            </div>\n            <div class=\"help-section\" data-team=\"all\">\n              <strong>Getting Started</strong>\n              <ol>\n                <li>Create a project</li>\n                <li>Add Figma file key</li>\n                <li>Extract &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 variant=\"outline\" dot=\"\">v0.8.0</ds-badge>\n      </div>\n    </aside>\n\n    <!-- Header -->\n    <header class=\"app-header\">\n      <div class=\"app-header__project-selector\" id=\"project-selector-container\">\n      <div class=\"project-selector\">\n        <svg class=\"project-selector__icon\">\n          \n          \n          \n        </svg>\n        <span class=\"project-selector__label\">Project:</span>\n        \n          \n              \n                test\n              \n            \n        \n      </div>\n    </div>\n      <div class=\"app-header__team-selector\">\n        <label for=\"team-context-select\" class=\"sr-only\">Select team context</label>\n        <select class=\"team-select\" id=\"team-context-select\" aria-label=\"Team context\">\n          <option value=\"all\">All Teams</option>\n          <option value=\"ui\">UI Team</option>\n          <option value=\"ux\">UX Team</option>\n          <option value=\"qa\">QA Team</option>\n        </select>\n      </div>\n      <div class=\"app-header__actions\">\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Toggle theme\" id=\"theme-toggle\" tabindex=\"0\" aria-label=\"Toggle dark/light theme\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z\"></path>\n          </svg>\n        </ds-button>\n        <ds-button variant=\"ghost\" size=\"icon\" title=\"Notifications\" tabindex=\"0\" aria-label=\"View notifications\">\n          <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"></path>\n            <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"></path>\n          </svg>\n        </ds-button>\n        <div class=\"ds-avatar\" tabindex=\"0\" role=\"button\" aria-label=\"User profile menu\">\n          <span>U</span>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main Content Area -->\n    <main class=\"app-main\">\n      <div id=\"page-content\" class=\"app-content\">\n      <div class=\"page-header\">\n        <h1>Documentation</h1>\n        <p class=\"text-muted\">DSS usage guides for all teams</p>\n      </div>\n\n      <div class=\"docs-layout mt-6\">\n        \n          <div class=\"docs-nav__section\">\n            <div class=\"docs-nav__title\">Getting Started</div>\n            <a data-doc=\"overview\" class=\"docs-nav__link active\">Overview</a>\n            <a data-doc=\"quickstart\" class=\"docs-nav__link\">Quick Start</a>\n            <a data-doc=\"concepts\" class=\"docs-nav__link\">Key Concepts</a>\n          </div>\n          <div class=\"docs-nav__section\">\n            <div class=\"docs-nav__title\">Team Guides</div>\n            <a data-doc=\"ui-team\" class=\"docs-nav__link\">UI Team</a>\n            <a data-doc=\"ux-team\" class=\"docs-nav__link\">UX Team</a>\n            <a data-doc=\"qa-team\" class=\"docs-nav__link\">QA Team</a>\n          </div>\n          <div class=\"docs-nav__section\">\n            <div class=\"docs-nav__title\">Features</div>\n            <a data-doc=\"tokens\" class=\"docs-nav__link\">Design Tokens</a>\n            <a data-doc=\"figma\" class=\"docs-nav__link\">Figma Integration</a>\n            <a data-doc=\"components\" class=\"docs-nav__link\">Components</a>\n            <a data-doc=\"ai-chat\" class=\"docs-nav__link\">AI Chat</a>\n          </div>\n          <div class=\"docs-nav__section\">\n            <div class=\"docs-nav__title\">Reference</div>\n            <a target=\"_blank\" href=\"/api/docs\" class=\"docs-nav__link\">API Docs \u2197</a>\n            <a data-doc=\"cli\" class=\"docs-nav__link\">CLI Commands</a>\n            <a data-doc=\"troubleshooting\" class=\"docs-nav__link\">Troubleshooting</a>\n          </div>\n        \n\n        <div id=\"docs-content\" class=\"docs-content\">\n          \n        <h2>What is DSS?</h2>\n        <p>Design System Server (DSS) is a platform that helps teams manage, sync, and evolve their design systems by connecting Figma designs to code.</p>\n\n        <h3>Core Features</h3>\n        <ul>\n          <li><strong>Token Extraction</strong> \u2014 Pull design tokens from Figma variables</li>\n          <li><strong>Token Sync</strong> \u2014 Generate CSS/JSON from Figma tokens</li>\n          <li><strong>Component Analysis</strong> \u2014 Scan your codebase for components</li>\n          <li><strong>Visual Diff</strong> \u2014 Detect changes between Figma versions</li>\n          <li><strong>AI Assistant</strong> \u2014 Get help via the built-in chat</li>\n        </ul>\n\n        <h3>Architecture</h3>\n        <ul>\n          <li><strong>REST API</strong> \u2014 Port 3456 (python tools/api/server.py)</li>\n          <li><strong>MCP Server</strong> \u2014 Port 3457 for AI tools</li>\n          <li><strong>Admin UI</strong> \u2014 This dashboard</li>\n          <li><strong>CLI</strong> \u2014 Command-line interface</li>\n        </ul>\n      \n        </div>\n      </div>\n    </div>\n\n      <!-- Right Sidebar - AI Chat -->\n      <aside class=\"app-sidebar collapsed\" id=\"ai-sidebar\">\n        <ds-ai-chat></ds-ai-chat>\n      </aside>\n      <button class=\"sidebar-toggle collapsed\" id=\"sidebar-toggle\" title=\"Toggle AI Assistant\" tabindex=\"0\" aria-label=\"Toggle AI Assistant sidebar\" aria-controls=\"ai-sidebar\" aria-expanded=\"true\">\n        <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M9 18l6-6-6-6\"></path>\n        </svg>\n      </button>\n    </main>\n  </div>\n\n  <!-- Load Components -->\n  <script type=\"module\">\n    // Import theme manager first (loads saved theme from cookie)\n    import themeManager from '/admin-ui/js/core/theme.js';\n\n    // Import all components\n    import '/admin-ui/js/components/ds-button.js';\n    import '/admin-ui/js/components/ds-card.js';\n    import '/admin-ui/js/components/ds-input.js';\n    import '/admin-ui/js/components/ds-badge.js';\n    import '/admin-ui/js/core/ai.js';\n\n    // Import browser logger for debugging\n    import '/admin-ui/js/core/browser-logger.js';\n\n    // Import and initialize app\n    import app from '/admin-ui/js/core/app.js';\n\n    // Initialize when DOM is ready\n    document.addEventListener('DOMContentLoaded', () => {\n      app.init();\n\n      // Setup theme toggle button\n      const themeToggle = document.getElementById('theme-toggle');\n      if (themeToggle) {\n        themeToggle.addEventListener('click', () => {\n          themeManager.toggle();\n        });\n      }\n\n      // Setup team context selector\n      const teamSelect = document.getElementById('team-context-select');\n      const updateHelpSections = (team) => {\n        document.querySelectorAll('.help-section').forEach(section => {\n          const sectionTeam = section.dataset.team;\n          section.style.display = (team === 'all' || sectionTeam === team || sectionTeam === 'all') ? '' : 'none';\n        });\n      };\n\n      if (teamSelect) {\n        const savedTeam = localStorage.getItem('dss_team_context') || 'all';\n        teamSelect.value = savedTeam;\n        updateHelpSections(savedTeam);\n\n        teamSelect.addEventListener('change', (e) => {\n          const team = e.target.value;\n          localStorage.setItem('dss_team_context', team);\n          updateHelpSections(team);\n          window.dispatchEvent(new CustomEvent('team-context-changed', {\n            detail: { team }\n          }));\n        });\n      }\n\n      // Setup AI sidebar toggle\n      const sidebarToggle = document.getElementById('sidebar-toggle');\n      const aiSidebar = document.getElementById('ai-sidebar');\n      if (sidebarToggle && aiSidebar) {\n        // Restore saved state\n        const sidebarCollapsed = localStorage.getItem('dss_ai_sidebar_collapsed') === 'true';\n        if (sidebarCollapsed) {\n          aiSidebar.classList.add('collapsed');\n          sidebarToggle.classList.add('collapsed');\n        }\n\n        sidebarToggle.addEventListener('click', () => {\n          const isCollapsed = aiSidebar.classList.toggle('collapsed');\n          sidebarToggle.classList.toggle('collapsed', isCollapsed);\n          localStorage.setItem('dss_ai_sidebar_collapsed', isCollapsed);\n        });\n      }\n    });\n  </script>\n\n\n</body></html>",
          "viewport": {
            "width": 1244,
            "height": 958,
            "devicePixelRatio": 2
          },
          "title": "Design System Server"
        }
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033709265,
      "relativeTime": 32296,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 533.7999999821186,
        "transferSize": 582,
        "encodedBodySize": 282,
        "decodedBodySize": 282
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033709433,
      "relativeTime": 32464,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 36 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 36 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033709484,
      "relativeTime": 32515,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 2458.5999999940395,
        "transferSize": 443,
        "encodedBodySize": 143,
        "decodedBodySize": 143
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033738622,
      "relativeTime": 61653,
      "level": "debug",
      "category": "console",
      "message": "[BrowserLogger] Synced 38 logs to server",
      "data": {
        "args": [
          "[BrowserLogger] Synced 38 logs to server"
        ]
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033738674,
      "relativeTime": 61705,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
      "data": {
        "url": "https://dss.overbits.luz.uy/api/browser-logs",
        "initiatorType": "fetch",
        "duration": 1028.2000000178814,
        "transferSize": 443,
        "encodedBodySize": 143,
        "decodedBodySize": 143
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    },
    {
      "timestamp": 1765033739776,
      "relativeTime": 62807,
      "level": "network",
      "category": "fetch",
      "message": "FETCH https://dss.overbits.luz.uy/health",
      "data": {
        "url": "https://dss.overbits.luz.uy/health",
        "initiatorType": "fetch",
        "duration": 185,
        "transferSize": 582,
        "encodedBodySize": 282,
        "decodedBodySize": 282
      },
      "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
    }
  ],
  "diagnostic": {
    "sessionId": "session-1765033676969-46h7j01a7",
    "uptime": 90913,
    "totalLogs": 41,
    "errorCount": 0,
    "warnCount": 0,
    "networkRequests": 20,
    "memory": {
      "usedJSHeapSize": 195706817,
      "jsHeapSizeLimit": 4294967296,
      "usagePercent": "4.56"
    },
    "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36",
    "recentErrors": [],
    "recentNetworkRequests": [
      {
        "timestamp": 1765033739776,
        "relativeTime": 62807,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/health",
        "data": {
          "url": "https://dss.overbits.luz.uy/health",
          "initiatorType": "fetch",
          "duration": 185,
          "transferSize": 582,
          "encodedBodySize": 282,
          "decodedBodySize": 282
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765033738674,
        "relativeTime": 61705,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
        "data": {
          "url": "https://dss.overbits.luz.uy/api/browser-logs",
          "initiatorType": "fetch",
          "duration": 1028.2000000178814,
          "transferSize": 443,
          "encodedBodySize": 143,
          "decodedBodySize": 143
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765033709484,
        "relativeTime": 32515,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/api/browser-logs",
        "data": {
          "url": "https://dss.overbits.luz.uy/api/browser-logs",
          "initiatorType": "fetch",
          "duration": 2458.5999999940395,
          "transferSize": 443,
          "encodedBodySize": 143,
          "decodedBodySize": 143
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765033709265,
        "relativeTime": 32296,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/health",
        "data": {
          "url": "https://dss.overbits.luz.uy/health",
          "initiatorType": "fetch",
          "duration": 533.7999999821186,
          "transferSize": 582,
          "encodedBodySize": 282,
          "decodedBodySize": 282
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#docs",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      },
      {
        "timestamp": 1765033690866,
        "relativeTime": 13897,
        "level": "network",
        "category": "fetch",
        "message": "FETCH https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
        "data": {
          "url": "https://dss.overbits.luz.uy/api/audit?project_id=proj-1764991776412&limit=50",
          "initiatorType": "fetch",
          "duration": 788.6000000238419,
          "transferSize": 740,
          "encodedBodySize": 440,
          "decodedBodySize": 440
        },
        "url": "https://dss.overbits.luz.uy/admin-ui/index.html#audit",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"
      }
    ]
  }
}