@agentiffai/design 0.1.7 → 0.1.9

package/dist/layout/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var styled8 = require('styled-components');
+var react = require('react');
+var styled9 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 var button = require('@react-aria/button');
-var react = require('react');
 var meter = require('@react-aria/meter');
 var tabs$1 = require('@react-aria/tabs');
 var collections = require('@react-stately/collections');
@@ -12,10 +12,397 @@ var reactAriaComponents = require('react-aria-components');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled8__default = /*#__PURE__*/_interopDefault(styled8);
+var styled9__default = /*#__PURE__*/_interopDefault(styled9);
+
+// src/components/layout/CategoryNav/CategoryNav.tsx
+
+// src/theme/tokens.ts
+var tokens = {
+  colors: {
+    // Brand colors
+    primary: "#2CB0AB",
+    // Teal (main brand color)
+    secondary: "#264E68",
+    // Deep Blue
+    accent: "#459FB9",
+    // Sea Green (additional brand color)
+    // Backgrounds - dark theme optimized
+    background: {
+      darkest: "#0a1b2a",
+      // Darkest Blue (brand color)
+      darker: "#151a26",
+      // Discord gray (preserved)
+      dark: "#1b2230",
+      // Discord surface gray (preserved)
+      light: "#252d3d"
+      // Discord border gray (preserved)
+    },
+    // Text hierarchy
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#B4B8C5",
+      tertiary: "#6B7280"},
+    // Teal (brand aligned)
+    error: "#EF4444",
+    // Sky Blue (brand aligned)
+    // Status colors (for workflow/SSE events)
+    status: {
+      idle: "#6B7280",
+      // Badge status (online/offline pattern)
+      online: "#2CB0AB",
+      offline: "#EF4444",
+      busy: "#459FB9"
+    },
+    // Surface variants (for overlays, cards, panels)
+    surface: {
+      base: "#1b2230",
+      overlay: "rgba(255, 255, 255, 0.05)",
+      overlayHover: "rgba(255, 255, 255, 0.1)",
+      overlayActive: "rgba(255, 255, 255, 0.15)",
+      subtle: "rgba(255, 255, 255, 0.02)",
+      glass: "rgba(255, 255, 255, 0.26)"},
+    // UI Element colors
+    border: {
+      default: "rgba(255, 255, 255, 0.1)",
+      subtle: "rgba(255, 255, 255, 0.05)",
+      focus: "#2CB0AB"},
+    // Scrollbar colors
+    scrollbar: {
+      track: "transparent",
+      thumb: "rgba(255, 255, 255, 0.2)",
+      thumbHover: "rgba(255, 255, 255, 0.3)"
+    },
+    // Overlays and backdrops
+    overlay: "rgba(0, 0, 0, 0.5)",
+    backdrop: "rgba(27, 34, 48, 0.95)",
+    // Platform brand colors (for social media icons)
+    platform: {
+      facebook: "#1877F2",
+      whatsapp: "#25D366"}
+  },
+  typography: {
+    fontFamily: {
+      primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif"},
+    fontSize: {
+      xs: "0.75rem",
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      base: "1rem",
+      // 18px
+      xl: "1.25rem"},
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    lineHeight: {
+      tight: 1.25,
+      relaxed: 1.75
+    }
+  },
+  spacing: {
+    xs: "0.25rem",
+    // 4px
+    sm: "0.5rem",
+    // 8px
+    md: "1rem",
+    // 16px
+    lg: "1.5rem"},
+  borderRadius: {
+    sm: "0.25rem",
+    // 4px
+    md: "0.5rem",
+    // 8px
+    lg: "0.75rem",
+    // 12px
+    xl: "1rem",
+    // 24px
+    full: "9999px"
+    // Fully rounded
+  },
+  shadows: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"},
+  transitions: {
+    fast: "150ms ease-in-out",
+    normal: "250ms ease-in-out",
+    slow: "350ms ease-in-out"
+  },
+  zIndex: {
+    base: 0,
+    sticky: 1020},
+  breakpoints: {
+    mobile: 640,
+    tablet: 1024,
+    desktop: 1280
+  }
+};
+
+// src/components/layout/CategoryNav/CategoryNav.styles.ts
+var NavigationContainer = styled9__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 6px;
+  gap: ${tokens.spacing.xs};
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &:hover {
+    background: transparent !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+`;
+var CategoryGroup = styled9__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-bottom: ${tokens.spacing.md};
+
+  &:hover {
+    background: transparent !important;
+    border-radius: 0 !important;
+  }
+`;
+var CategoryButton = styled9__default.default.button`
+  width: 48px;
+  height: 48px;
+  border: none;
+  padding: 0;
+  border-radius: ${({ $active }) => $active ? tokens.borderRadius.xl : tokens.borderRadius.full};
+  background-color: ${({ $active }) => $active ? tokens.colors.primary : tokens.colors.background.light};
+  color: ${tokens.colors.text.primary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all ${tokens.transitions.fast};
+  position: relative;
+
+  &:hover {
+    border-radius: ${tokens.borderRadius.xl};
+    background-color: ${({ $active }) => $active ? tokens.colors.primary : tokens.colors.surface.overlayHover};
+  }
 
-// src/components/layout/Icon/Icon.styles.ts
-var IconWrapper = styled8__default.default.span`
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var CategoryLabel = styled9__default.default.span`
+  font-size: 9px;
+  color: ${tokens.colors.text.tertiary};
+  margin-top: 2px;
+  text-align: center;
+  max-width: 56px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var SubItemList = styled9__default.default.div`
+  display: ${({ $expanded }) => $expanded ? "flex" : "none"};
+  flex-direction: column;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  margin-top: ${tokens.spacing.xs};
+  width: 100%;
+`;
+var SubItemButton = styled9__default.default.button`
+  width: 32px;
+  height: 32px;
+  border: none;
+  padding: 0;
+  border-radius: ${({ $active }) => $active ? tokens.borderRadius.md : tokens.borderRadius.full};
+  background-color: ${({ $active }) => $active ? tokens.colors.surface.overlayActive : tokens.colors.surface.overlay};
+  color: ${tokens.colors.text.primary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all ${tokens.transitions.fast};
+
+  &:hover {
+    border-radius: ${tokens.borderRadius.md};
+    background-color: ${({ $active }) => $active ? tokens.colors.surface.overlayActive : tokens.colors.surface.overlayHover};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var CountBadge = styled9__default.default.span`
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  background: ${tokens.colors.accent};
+  color: ${tokens.colors.text.primary};
+  font-size: 10px;
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  min-width: 16px;
+  height: 16px;
+  border-radius: ${tokens.borderRadius.md};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 ${tokens.spacing.xs};
+`;
+var filterBadgeIn = styled9.keyframes`
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var FilterBadge = styled9__default.default.div`
+  position: absolute;
+  bottom: -${tokens.spacing.xs};
+  right: -${tokens.spacing.xs};
+  width: 18px;
+  height: 18px;
+  background: ${tokens.colors.background.darker};
+  border-radius: ${tokens.borderRadius.full};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${filterBadgeIn} ${tokens.transitions.normal};
+
+  svg {
+    width: 10px;
+    height: 10px;
+    fill: ${tokens.colors.text.primary};
+  }
+`;
+var CategoryIconImg = styled9__default.default.img`
+  width: ${({ $size }) => $size || 24}px;
+  height: ${({ $size }) => $size || 24}px;
+  object-fit: contain;
+  filter: ${({ $active }) => $active ? "brightness(0) invert(1)" : "none"};
+`;
+var SubItemIconImg = styled9__default.default.img`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  object-fit: contain;
+  filter: ${({ $active }) => $active ? "brightness(0) invert(1)" : "none"};
+`;
+var FilterIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-label": "Filter active", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Filter active" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })
+] });
+function CategoryNav({
+  categories,
+  selectedCategory,
+  selectedSubItem,
+  onCategorySelect,
+  onSubItemSelect,
+  categoryCounts,
+  enabledCategories,
+  testIdPrefix = "category"
+}) {
+  const [expandedCategory, setExpandedCategory] = react.useState(selectedCategory);
+  const hasSubItemFilterForCategory = react.useCallback(
+    (categoryId) => {
+      if (!selectedSubItem) return false;
+      const category = categories.find((c) => c.id === categoryId);
+      return category?.subItems?.some((s) => s.id === selectedSubItem) ?? false;
+    },
+    [selectedSubItem, categories]
+  );
+  const handleCategoryClick = react.useCallback(
+    (categoryId) => {
+      if (selectedCategory === categoryId && hasSubItemFilterForCategory(categoryId)) {
+        onSubItemSelect(null);
+        return;
+      }
+      if (selectedCategory === categoryId) {
+        setExpandedCategory((prev) => prev === categoryId ? null : categoryId);
+      } else {
+        onCategorySelect(categoryId);
+        onSubItemSelect(null);
+        setExpandedCategory(categoryId);
+      }
+    },
+    [selectedCategory, onCategorySelect, onSubItemSelect, hasSubItemFilterForCategory]
+  );
+  const handleSubItemClick = react.useCallback(
+    (subItemId) => {
+      if (selectedSubItem === subItemId) {
+        onSubItemSelect(null);
+      } else {
+        onSubItemSelect(subItemId);
+      }
+    },
+    [selectedSubItem, onSubItemSelect]
+  );
+  const visibleCategories = enabledCategories && enabledCategories.size > 0 ? categories.filter((cat) => enabledCategories.has(cat.id)) : categories;
+  const renderSubItemIcon = (subItem, isActive) => {
+    if (typeof subItem.icon === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(SubItemIconImg, { src: subItem.icon, alt: subItem.name, $size: 16, $active: isActive });
+    }
+    return subItem.icon;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(NavigationContainer, { "data-testid": `${testIdPrefix}-navigation`, children: visibleCategories.map((category) => {
+    const isSelected = selectedCategory === category.id;
+    const isExpanded = expandedCategory === category.id;
+    const count = categoryCounts?.[category.id];
+    const hasSubItemFilter = hasSubItemFilterForCategory(category.id);
+    return /* @__PURE__ */ jsxRuntime.jsxs(CategoryGroup, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        CategoryButton,
+        {
+          $active: isSelected,
+          $expanded: isExpanded,
+          onClick: () => handleCategoryClick(category.id),
+          "aria-label": hasSubItemFilter ? `${category.label} (filtered - click to clear)` : category.label,
+          "aria-expanded": isExpanded,
+          "aria-pressed": isSelected,
+          title: hasSubItemFilter ? `${category.label} - Click to clear filter` : category.label,
+          "data-testid": `${testIdPrefix}-${category.id}`,
+          "data-active": isSelected,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CategoryIconImg,
+              {
+                src: category.iconPath,
+                alt: category.label,
+                $size: 24,
+                $active: isSelected
+              }
+            ),
+            count !== void 0 && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(CountBadge, { children: count }),
+            hasSubItemFilter && /* @__PURE__ */ jsxRuntime.jsx(FilterBadge, { children: /* @__PURE__ */ jsxRuntime.jsx(FilterIcon, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(CategoryLabel, { children: category.label }),
+      category.subItems && category.subItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SubItemList, { $expanded: isExpanded, children: category.subItems.map((subItem) => {
+        const isSubItemActive = selectedSubItem === subItem.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SubItemButton,
+          {
+            $active: isSubItemActive,
+            onClick: () => handleSubItemClick(subItem.id),
+            "aria-label": subItem.name,
+            title: subItem.name,
+            "data-testid": `${testIdPrefix}-subitem-${subItem.id}`,
+            children: renderSubItemIcon(subItem, isSubItemActive)
+          },
+          subItem.id
+        );
+      }) })
+    ] }, category.id);
+  }) });
+}
+CategoryNav.displayName = "CategoryNav";
+var IconWrapper = styled9__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -29,13 +416,13 @@ var IconWrapper = styled8__default.default.span`
     height: 100%;
     filter: ${({ $color }) => {
   if ($color === "currentColor" || !$color) return "inherit";
-  if ($color === "white" || $color === "#ffffff" || $color === "#fff") {
+  if ($color === "white" || $color === tokens.colors.text.primary || $color === "#fff") {
     return "brightness(0) saturate(100%) invert(100%)";
   }
-  if ($color === "#b9bbbe") {
+  if ($color === tokens.colors.text.secondary || $color === "#b9bbbe") {
     return "brightness(0) saturate(100%) invert(75%) sepia(8%) saturate(223%) hue-rotate(180deg) brightness(94%) contrast(86%)";
   }
-  if ($color === "#ed4245" || $color === "#f04747") {
+  if ($color === tokens.colors.error || $color === "#ed4245" || $color === "#f04747") {
     return "brightness(0) saturate(100%) invert(38%) sepia(97%) saturate(1459%) hue-rotate(334deg) brightness(95%) contrast(93%)";
   }
   return "none";
@@ -91,39 +478,37 @@ function Icon({
   return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
 }
 Icon.displayName = "Icon";
-var NAV_BG = "#232428";
-var NAV_BORDER = "#1E1F22";
-var Container = styled8__default.default.nav`
+var Container = styled9__default.default.nav`
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: ${NAV_BG};
-  border-top: 1px solid ${NAV_BORDER};
+  background-color: ${tokens.colors.background.darker};
+  border-top: 1px solid ${tokens.colors.border.subtle};
   /* Reserve space for Android nav buttons (80px) below the actual navbar */
   padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
-  z-index: 10;
+  z-index: ${tokens.zIndex.sticky};
 
   /* Dark theme support */
   @media (prefers-color-scheme: dark) {
-    background-color: #1a1b1e;
+    background-color: ${tokens.colors.background.darkest};
   }
 `;
-var ContentWrapper = styled8__default.default.div`
+var ContentWrapper = styled9__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* Fixed height for actual navbar content - keeps vertical centering */
   height: 52px;
-  padding: 0 8px;
+  padding: 0 ${tokens.spacing.sm};
   max-width: 100%;
 
   /* Responsive padding */
-  @media (min-width: 768px) {
-    padding: 0 16px;
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    padding: 0 ${tokens.spacing.md};
   }
 `;
-var UserStatusSlot = styled8__default.default.div`
+var UserStatusSlot = styled9__default.default.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
@@ -136,15 +521,15 @@ var UserStatusSlot = styled8__default.default.div`
     white-space: nowrap;
   }
 `;
-var ActionButtonsSlot = styled8__default.default.div`
+var ActionButtonsSlot = styled9__default.default.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 
   /* Ensure buttons stay visible */
   @media (min-width: 480px) {
-    gap: 8px;
+    gap: ${tokens.spacing.sm};
   }
 `;
 function NavHorizontal({
@@ -159,18 +544,16 @@ function NavHorizontal({
   ] }) });
 }
 NavHorizontal.displayName = "NavHorizontal";
-var NAV_BG2 = "#202225";
-var NAV_SEPARATOR = "#36393F";
-var Container2 = styled8__default.default.nav`
+var Container2 = styled9__default.default.nav`
   position: absolute;
   top: 0;
   left: 0;
   bottom: 52px; /* Account for horizontal nav height */
   width: 72px;
-  background-color: ${NAV_BG2};
+  background-color: ${tokens.colors.background.darker};
   display: flex;
   flex-direction: column;
-  z-index: 9; /* Below horizontal nav and chat sidebar */
+  z-index: ${tokens.zIndex.base + 9}; /* Below horizontal nav and chat sidebar */
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none; /* Firefox */
@@ -182,15 +565,15 @@ var Container2 = styled8__default.default.nav`
 
   /* Dark theme support */
   @media (prefers-color-scheme: dark) {
-    background-color: #1a1b1e;
+    background-color: ${tokens.colors.background.darkest};
   }
 
   /* Responsive adjustments */
-  @media (max-width: 768px) {
+  @media (max-width: ${tokens.breakpoints.tablet}px) {
     width: 60px; /* Match MainPane left offset on mobile */
   }
 `;
-var TopSection = styled8__default.default.div`
+var TopSection = styled9__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -199,29 +582,29 @@ var TopSection = styled8__default.default.div`
   flex-shrink: 0;
   position: relative;
 
-  @media (min-width: 768px) {
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
     height: 64px; /* Same as PaneSectionHeader on desktop */
   }
 `;
-var BackButton = styled8__default.default.button`
+var BackButton = styled9__default.default.button`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
-  border-radius: 50%;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
-  background-color: ${NAV_SEPARATOR};
-  color: #ffffff;
+  background-color: ${tokens.colors.background.light};
+  color: ${tokens.colors.text.primary};
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease-in-out;
+  transition: all ${tokens.transitions.normal};
 
   &:hover {
-    background-color: #5865F2;
+    background-color: ${tokens.colors.primary};
   }
 
   &:active {
@@ -233,47 +616,47 @@ var BackButton = styled8__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid #5865F2;
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 `;
-styled8__default.default.span`
-  font-size: 20px;
-  line-height: 1;
-  font-weight: bold;
+styled9__default.default.span`
+  font-size: ${tokens.typography.fontSize.xl};
+  line-height: ${tokens.typography.lineHeight.tight};
+  font-weight: ${tokens.typography.fontWeight.bold};
 `;
-var Separator = styled8__default.default.div`
+var Separator = styled9__default.default.div`
   width: 32px;
   height: 2px;
-  background-color: ${NAV_SEPARATOR};
+  background-color: ${tokens.colors.background.light};
   align-self: center;
-  margin: 8px auto 12px;
+  margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
   border-radius: 1px;
 `;
-var FolderGroupsSlot = styled8__default.default.div`
+var FolderGroupsSlot = styled9__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 0 12px 12px;
+  gap: ${tokens.spacing.sm};
+  padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   flex: 1;
 
   /* Server/workspace icons styling */
   > * {
     width: 48px;
     height: 48px;
-    border-radius: 50%;
-    transition: border-radius 0.15s ease-out;
+    border-radius: ${tokens.borderRadius.full};
+    transition: border-radius ${tokens.transitions.fast};
     cursor: pointer;
 
     &:hover {
-      border-radius: 16px;
+      border-radius: ${tokens.borderRadius.xl};
     }
   }
 
   /* Responsive adjustments */
-  @media (max-width: 768px) {
-    padding: 0 6px 12px; /* Reduce horizontal padding on mobile */
+  @media (max-width: ${tokens.breakpoints.tablet}px) {
+    padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
   }
 `;
 function NavVertical({
@@ -306,27 +689,66 @@ function NavVertical({
   ] });
 }
 NavVertical.displayName = "NavVertical";
-var Container3 = styled8__default.default.div`
+var Container3 = styled9__default.default.div`
   position: relative;
   width: 100%;
   height: 100vh;
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: ${tokens.colors.surface.subtle};
   overflow: hidden;
 
   /* Ensure content is clipped on mobile */
-  @media (max-width: 768px) {
+  @media (max-width: ${tokens.breakpoints.tablet}px) {
     overflow: hidden;
     position: relative;
   }
 `;
-var MainPane = styled8__default.default.main`
+var BackgroundPane = styled9__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 72px; /* Width of vertical nav */
+  right: 0;
+  bottom: 52px; /* Height of horizontal nav */
+  background-color: transparent;
+  overflow: auto;
+  z-index: ${tokens.zIndex.base}; /* Lower than MainPane */
+
+  /* Custom scrollbar styling */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${tokens.colors.scrollbar.track};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${tokens.colors.scrollbar.thumb};
+    border-radius: ${tokens.borderRadius.sm};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: ${tokens.colors.scrollbar.thumbHover};
+  }
+
+  /* Firefox scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: ${tokens.colors.scrollbar.thumb} transparent;
+
+  /* Responsive adjustments */
+  @media (max-width: ${tokens.breakpoints.tablet}px) {
+    left: 60px; /* Smaller nav on mobile */
+  }
+`;
+var MainPane = styled9__default.default.main`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
   right: 0;
   bottom: 52px; /* Height of horizontal nav */
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${tokens.colors.surface.overlay};
   overflow: auto;
+  z-index: ${tokens.zIndex.base + 1}; /* Higher than BackgroundPane */
 
   /* Custom scrollbar styling */
   &::-webkit-scrollbar {
@@ -335,29 +757,30 @@ var MainPane = styled8__default.default.main`
   }
 
   &::-webkit-scrollbar-track {
-    background: transparent;
+    background: ${tokens.colors.scrollbar.track};
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #202225;
-    border-radius: 4px;
+    background-color: ${tokens.colors.scrollbar.thumb};
+    border-radius: ${tokens.borderRadius.sm};
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #18191c;
+    background-color: ${tokens.colors.scrollbar.thumbHover};
   }
 
   /* Firefox scrollbar */
   scrollbar-width: thin;
-  scrollbar-color: #202225 transparent;
+  scrollbar-color: ${tokens.colors.scrollbar.thumb} transparent;
 
   /* Responsive adjustments */
-  @media (max-width: 768px) {
+  @media (max-width: ${tokens.breakpoints.tablet}px) {
     left: 60px; /* Smaller nav on mobile */
   }
 `;
 function Layout({
   mainPaneSlot,
+  backgroundSlot,
   navVerticalSlot,
   navHorizontalUserSlot,
   navHorizontalActionsSlot,
@@ -366,6 +789,7 @@ function Layout({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(NavVertical, { folderGroupsSlot: navVerticalSlot, onBackClick: onNavBackClick }),
+    backgroundSlot && /* @__PURE__ */ jsxRuntime.jsx(BackgroundPane, { children: backgroundSlot }),
     /* @__PURE__ */ jsxRuntime.jsx(MainPane, { children: mainPaneSlot }),
     /* @__PURE__ */ jsxRuntime.jsx(
       NavHorizontal,
@@ -377,45 +801,45 @@ function Layout({
   ] });
 }
 Layout.displayName = "Layout";
-var Container4 = styled8__default.default.div`
+var Container4 = styled9__default.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 4px;
+  gap: ${tokens.spacing.xs};
 `;
-var ActionButton = styled8__default.default.button`
+var ActionButton = styled9__default.default.button`
   width: ${({ $size = 32 }) => $size}px;
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
   min-height: ${({ $size = 32 }) => $size}px;
-  border-radius: ${({ $isPrimary }) => $isPrimary ? "50%" : "4px"};
+  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.sm};
   border: none;
-  background-color: ${({ $isPrimary }) => $isPrimary ? "#5865F2" : "transparent"};
-  color: ${({ $isPrimary }) => $isPrimary ? "#FFFFFF" : "#b9bbbe"};
+  background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.primary : "transparent"};
+  color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.text.primary : tokens.colors.text.secondary};
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.15s ease;
-  font-size: 16px;
+  transition: all ${tokens.transitions.fast};
+  font-size: ${tokens.typography.fontSize.base};
 
   &:hover {
-    background-color: ${({ $isPrimary }) => $isPrimary ? "#4752C4" : "rgba(255, 255, 255, 0.1)"};
-    color: ${({ $isPrimary }) => $isPrimary ? "#FFFFFF" : "#dcddde"};
+    background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.secondary : tokens.colors.surface.overlayHover};
+    color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.text.primary : tokens.colors.text.primary};
   }
 
   &:active {
     transform: scale(0.95);
   }
 
-  ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled8.css`
-      background-color: rgba(255, 255, 255, 0.08);
-      color: #ffffff;
+  ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled9.css`
+      background-color: ${tokens.colors.surface.overlay};
+      color: ${tokens.colors.text.primary};
     `}
 
-  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && styled8.css`
-      background-color: #4752C4;
-      color: #ffffff;
+  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && styled9.css`
+      background-color: ${tokens.colors.secondary};
+      color: ${tokens.colors.text.primary};
     `}
 
   &:focus {
@@ -423,7 +847,7 @@ var ActionButton = styled8__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid #5865f2;
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 `;
@@ -462,7 +886,7 @@ function ActionButtons({
     /* @__PURE__ */ jsxRuntime.jsx(
       ActionButtonItem,
       {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "calendar-fill", size: 16, color: "#b9bbbe" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "calendar-fill", size: 16, color: tokens.colors.text.secondary }),
         label: "Calendar",
         onClick: onCalendarClick,
         isActive: isCalendarActive,
@@ -472,7 +896,7 @@ function ActionButtons({
     /* @__PURE__ */ jsxRuntime.jsx(
       ActionButtonItem,
       {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-fill", size: 16, color: "#b9bbbe" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-fill", size: 16, color: tokens.colors.text.secondary }),
         label: "Settings",
         onClick: onSettingsClick,
         isActive: isSettingsActive,
@@ -482,7 +906,7 @@ function ActionButtons({
     /* @__PURE__ */ jsxRuntime.jsx(
       ActionButtonItem,
       {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chat-1-fill", size: 16, color: "#b9bbbe" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chat-1-fill", size: 16, color: tokens.colors.text.secondary }),
         label: "Chat",
         onClick: onChatClick,
         isActive: isChatActive,
@@ -493,93 +917,91 @@ function ActionButtons({
 }
 ActionButtons.displayName = "ActionButtons";
 var statusColors = {
-  online: "#43B581",
-  idle: "#FAA61A",
-  busy: "#F04747",
-  offline: "#747F8D"
+  online: tokens.colors.status.online,
+  idle: tokens.colors.status.idle,
+  busy: tokens.colors.status.busy,
+  offline: tokens.colors.status.offline
 };
-var Container5 = styled8__default.default.button`
-  display: flex;
+var Container5 = styled9__default.default.button`
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: center;
-  gap: 8px;
-  padding: 4px 6px;
-  border-radius: 4px;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.md};
   border: none;
-  background: transparent;
+  background: ${tokens.colors.surface.subtle};
   color: inherit;
-  font: inherit;
-  transition: background-color 0.2s ease, opacity 0.2s ease;
+  font-family: ${tokens.typography.fontFamily.primary};
+  transition: background-color ${tokens.transitions.fast}, opacity ${tokens.transitions.fast};
   cursor: ${(props) => props.$isDisabled ? "not-allowed" : "pointer"};
   opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
   text-align: left;
   width: 100%;
 
   &:hover:not(:disabled) {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: ${tokens.colors.surface.overlay};
   }
 
   &:focus-visible {
-    outline: 2px solid #5865F2;
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 
   &:active:not(:disabled) {
-    background-color: rgba(255, 255, 255, 0.08);
+    background-color: ${tokens.colors.surface.overlayActive};
   }
 `;
-var IconWrapper2 = styled8__default.default.div`
+var IconWrapper2 = styled9__default.default.div`
   position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background-color: #36393f;
+  width: 36px;
+  height: 36px;
+  border-radius: ${tokens.borderRadius.md};
+  background-color: ${tokens.colors.background.light};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  overflow: hidden;
 `;
-var WorkflowInfo = styled8__default.default.div`
+var WorkflowInfo = styled9__default.default.div`
   display: flex;
   flex-direction: column;
+  gap: ${tokens.spacing.xs};
   min-width: 0;
 `;
-var WorkflowName = styled8__default.default.span`
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.2;
+var WorkflowName = styled9__default.default.span`
+  color: ${tokens.colors.text.primary};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var WorkflowStatus = styled8__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: #b9bbbe;
-  font-size: 11px;
-  line-height: 1.2;
+var WorkflowStatus = styled9__default.default.span`
+  color: ${tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.regular};
+  line-height: ${tokens.typography.lineHeight.tight};
+  text-transform: capitalize;
 `;
-var StatusIndicatorOuter = styled8__default.default.span`
+var StatusIndicatorOuter = styled9__default.default.span`
   position: absolute;
   bottom: -2px;
   right: -2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #232428;
+  width: 12px;
+  height: 12px;
+  border-radius: ${tokens.borderRadius.full};
+  background-color: ${tokens.colors.background.darker};
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
 `;
-var StatusIndicatorInner = styled8__default.default.span`
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+var StatusIndicatorInner = styled9__default.default.span`
+  width: 8px;
+  height: 8px;
+  border-radius: ${tokens.borderRadius.full};
   background-color: ${({ $status }) => statusColors[$status]};
-  flex-shrink: 0;
 `;
 function WorkflowStatusCard({
   icon,
@@ -619,55 +1041,49 @@ function WorkflowStatusCard({
   ] });
 }
 WorkflowStatusCard.displayName = "WorkflowStatusCard";
-var BG_TERTIARY = "#36393F";
-var TEXT_PRIMARY = "#FFFFFF";
-var TEXT_SECONDARY = "#B9BBBE";
-var TEXT_MUTED = "#72767D";
-var ACCENT_COLOR = "#5865F2";
-var HOVER_BG = "rgba(255, 255, 255, 0.05)";
-var DarkNotificationCardContainer = styled8__default.default.div`
+var DarkNotificationCardContainer = styled9__default.default.div`
   display: flex;
   flex-direction: column;
   padding: 6px;
-  background: ${BG_TERTIARY};
-  border-radius: 8px;
-  gap: 4px;
+  background: ${tokens.colors.surface.base};
+  border-radius: ${tokens.borderRadius.md};
+  gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
   overflow: hidden;
 `;
-var DarkSectionHeader = styled8__default.default.button`
+var DarkSectionHeader = styled9__default.default.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 4px 2px;
+  padding: ${tokens.spacing.xs} 2px;
   border: none;
   background: transparent;
-  font-family: ${(props) => props.theme?.fonts?.body || "system-ui, sans-serif"};
+  font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
-  font-weight: 600;
-  color: ${TEXT_SECONDARY};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.secondary};
   text-align: left;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all ${tokens.transitions.normal};
 
   &:hover {
-    color: ${TEXT_PRIMARY};
+    color: ${tokens.colors.text.primary};
   }
 
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR};
+    outline: 2px solid ${tokens.colors.primary};
     outline-offset: 2px;
-    border-radius: 4px;
+    border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var DarkChevronIcon = styled8__default.default.span`
+var DarkChevronIcon = styled9__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.2s ease;
-  color: ${TEXT_MUTED};
+  transition: transform ${tokens.transitions.normal};
+  color: ${tokens.colors.text.tertiary};
 
   ${(props) => props.$isExpanded ? `
     transform: rotate(0deg);
@@ -680,35 +1096,35 @@ var DarkChevronIcon = styled8__default.default.span`
     height: 12px;
   }
 `;
-var DarkSectionContent = styled8__default.default.div`
+var DarkSectionContent = styled9__default.default.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding-left: 4px;
+  padding-left: ${tokens.spacing.xs};
   margin-top: 2px;
   min-width: 0;
   overflow: hidden;
 `;
-var DarkNotificationItemWrapper = styled8__default.default.button`
+var DarkNotificationItemWrapper = styled9__default.default.button`
   display: flex;
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 4px 6px;
+  padding: ${tokens.spacing.xs} 6px;
   border: none;
   cursor: pointer;
   text-align: left;
-  transition: all 0.2s ease;
-  border-radius: 4px;
+  transition: all ${tokens.transitions.normal};
+  border-radius: ${tokens.borderRadius.sm};
   min-width: 0;
   overflow: hidden;
 
   /* Default state - transparent background */
-  background-color: ${(props) => props.$isSelected ? ACCENT_COLOR : "transparent"};
+  background-color: ${(props) => props.$isSelected ? tokens.colors.primary : "transparent"};
 
   /* Hover state */
   &:hover:not(:disabled) {
-    background-color: ${(props) => props.$isSelected ? "#4752C4" : HOVER_BG};
+    background-color: ${(props) => props.$isSelected ? tokens.colors.accent : tokens.colors.surface.overlay};
   }
 
   /* Active state */
@@ -718,7 +1134,7 @@ var DarkNotificationItemWrapper = styled8__default.default.button`
 
   /* Focus state */
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR};
+    outline: 2px solid ${tokens.colors.primary};
     outline-offset: 2px;
   }
 
@@ -728,17 +1144,17 @@ var DarkNotificationItemWrapper = styled8__default.default.button`
     opacity: 0.5;
   }
 `;
-var DarkItemIcon = styled8__default.default.span`
+var DarkItemIcon = styled9__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  border-radius: ${(props) => props.$hasCustomIcon ? "4px" : "50%"};
+  border-radius: ${(props) => props.$hasCustomIcon ? tokens.borderRadius.sm : tokens.borderRadius.full};
   background-color: ${(props) => props.$iconColor || "transparent"};
-  color: ${(props) => props.$hasCustomIcon ? TEXT_PRIMARY : TEXT_MUTED};
-  font-size: 12px;
+  color: ${(props) => props.$hasCustomIcon ? tokens.colors.text.primary : tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.xs};
 
   /* Default circle icon styling */
   ${(props) => !props.$hasCustomIcon && `
@@ -753,19 +1169,19 @@ var DarkItemIcon = styled8__default.default.span`
     padding: 2px;
   `}
 `;
-var DarkItemText = styled8__default.default.span`
+var DarkItemText = styled9__default.default.span`
   flex: 1;
-  font-family: ${(props) => props.theme?.fonts?.body || "system-ui, sans-serif"};
+  font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
-  font-weight: ${(props) => props.$isSelected ? "500" : "400"};
-  color: ${(props) => props.$isSelected ? TEXT_PRIMARY : TEXT_SECONDARY};
-  line-height: 1.3;
+  font-weight: ${(props) => props.$isSelected ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.regular};
+  color: ${(props) => props.$isSelected ? tokens.colors.text.primary : tokens.colors.text.secondary};
+  line-height: ${tokens.typography.lineHeight.tight};
   word-wrap: break-word;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var DarkMenuButton = styled8__default.default.button`
+var DarkMenuButton = styled9__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -773,24 +1189,24 @@ var DarkMenuButton = styled8__default.default.button`
   height: 20px;
   padding: 0;
   border: none;
-  border-radius: 4px;
+  border-radius: ${tokens.borderRadius.sm};
   background-color: transparent;
-  color: ${TEXT_PRIMARY};
+  color: ${tokens.colors.text.primary};
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all ${tokens.transitions.normal};
   flex-shrink: 0;
 
   &:hover:not(:disabled) {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: ${tokens.colors.surface.overlayHover};
   }
 
   &:active:not(:disabled) {
-    background-color: rgba(255, 255, 255, 0.15);
+    background-color: ${tokens.colors.surface.overlayActive};
     transform: scale(0.95);
   }
 
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR};
+    outline: 2px solid ${tokens.colors.primary};
     outline-offset: 2px;
   }
 
@@ -799,9 +1215,9 @@ var DarkMenuButton = styled8__default.default.button`
     height: 14px;
   }
 `;
-var DarkTimestamp = styled8__default.default.span`
+var DarkTimestamp = styled9__default.default.span`
   font-size: 10px;
-  color: ${TEXT_MUTED};
+  color: ${tokens.colors.text.tertiary};
   white-space: normal;
   word-wrap: break-word;
   text-align: right;
@@ -984,30 +1400,22 @@ var DarkNotificationItemComponent = ({
   );
 };
 DarkNotificationCard.displayName = "DarkNotificationCard";
-var BG_PRIMARY = "#2F3136";
-var BG_SECONDARY = "#202225";
-var BG_TERTIARY2 = "#36393F";
-var TEXT_PRIMARY2 = "#FFFFFF";
-var TEXT_SECONDARY2 = "#B9BBBE";
-var TEXT_MUTED2 = "#72767D";
-var ACCENT_COLOR2 = "#5865F2";
-var HOVER_BG2 = "rgba(255, 255, 255, 0.05)";
-var Container6 = styled8__default.default.div`
+var Container6 = styled9__default.default.div`
   width: 100%;
   height: 100%;
   background-color: transparent;
-  color: ${TEXT_PRIMARY2};
+  color: ${tokens.colors.text.primary};
   display: flex;
   flex-direction: column;
-  font-family: ${(props) => props.theme?.fonts?.body || "system-ui, sans-serif"};
+  font-family: ${tokens.typography.fontFamily.primary};
   overflow: hidden; // Prevent content from escaping container bounds
 `;
-var TabListWrapper = styled8__default.default.div`
+var TabListWrapper = styled9__default.default.div`
   display: flex;
-  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-  background-color: rgba(255, 255, 255, 0.03);
-  padding: 0 16px;
-  gap: 8px;
+  border-bottom: 2px solid ${tokens.colors.border.default};
+  background-color: ${tokens.colors.surface.subtle};
+  padding: 0 ${tokens.spacing.md};
+  gap: ${tokens.spacing.sm};
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -1017,31 +1425,31 @@ var TabListWrapper = styled8__default.default.div`
     display: none;
   }
 
-  @media (max-width: 640px) {
-    padding: 0 8px;
-    gap: 4px;
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
+    padding: 0 ${tokens.spacing.sm};
+    gap: ${tokens.spacing.xs};
   }
 `;
-var TabButton = styled8__default.default.button`
-  padding: 12px 20px;
+var TabButton = styled9__default.default.button`
+  padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   background: none;
   border: none;
-  color: ${(props) => props.$isSelected ? TEXT_PRIMARY2 : TEXT_SECONDARY2};
-  font-size: 14px;
-  font-weight: 600;
+  color: ${(props) => props.$isSelected ? tokens.colors.text.primary : tokens.colors.text.secondary};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
   cursor: pointer;
   position: relative;
-  transition: color 0.2s ease;
+  transition: color ${tokens.transitions.normal};
   white-space: nowrap;
   flex-shrink: 0;
 
-  @media (max-width: 640px) {
-    padding: 10px 12px;
-    font-size: 12px;
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
+    padding: 10px ${tokens.spacing.md};
+    font-size: ${tokens.typography.fontSize.xs};
   }
 
   &:hover {
-    color: ${TEXT_PRIMARY2};
+    color: ${tokens.colors.text.primary};
   }
 
   &:focus {
@@ -1049,9 +1457,9 @@ var TabButton = styled8__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR2};
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: -2px;
-    border-radius: 4px;
+    border-radius: ${tokens.borderRadius.sm};
   }
 
   ${(props) => props.$isSelected && `
@@ -1062,86 +1470,86 @@ var TabButton = styled8__default.default.button`
       left: 0;
       right: 0;
       height: 2px;
-      background-color: ${ACCENT_COLOR2};
+      background-color: ${tokens.colors.primary};
     }
   `}
 `;
-var TabPanelWrapper = styled8__default.default.div`
+var TabPanelWrapper = styled9__default.default.div`
   flex: 1;
-  padding: 24px;
+  padding: ${tokens.spacing.lg};
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${tokens.colors.surface.overlay};
   min-height: 0; // Enable proper flex shrinking and scrolling
 
-  @media (max-width: 640px) {
-    padding: 16px;
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
+    padding: ${tokens.spacing.md};
   }
 
   @media (max-width: 480px) {
-    padding: 12px;
+    padding: ${tokens.spacing.md};
   }
 
   /* Custom scrollbar */
   scrollbar-width: thin;
-  scrollbar-color: ${BG_TERTIARY2} ${BG_PRIMARY};
+  scrollbar-color: ${tokens.colors.scrollbar.thumb} ${tokens.colors.scrollbar.track};
 
   &::-webkit-scrollbar {
     width: 8px;
   }
 
   &::-webkit-scrollbar-track {
-    background: ${BG_PRIMARY};
+    background: ${tokens.colors.background.dark};
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${BG_TERTIARY2};
-    border-radius: 4px;
+    background: ${tokens.colors.background.light};
+    border-radius: ${tokens.borderRadius.sm};
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: #4a4d52;
+    background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var RunsContainer = styled8__default.default.div`
+var RunsContainer = styled9__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: ${tokens.spacing.lg};
   width: 100%;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 
-  @media (max-width: 640px) {
-    gap: 16px;
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
+    gap: ${tokens.spacing.md};
   }
 `;
-var BrowseButton = styled8__default.default.button`
+styled9__default.default.button`
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: ${tokens.spacing.md};
   width: 100%;
-  padding: 12px 16px;
-  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  color: ${TEXT_SECONDARY2};
-  font-size: 14px;
-  font-weight: 500;
+  padding: ${tokens.spacing.md} ${tokens.spacing.md};
+  background-color: ${tokens.colors.surface.overlay};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.md};
+  color: ${tokens.colors.text.secondary};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all ${tokens.transitions.normal};
   white-space: nowrap;
   overflow: hidden;
 
-  @media (max-width: 640px) {
-    padding: 10px 12px;
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
+    padding: 10px ${tokens.spacing.md};
     font-size: 13px;
-    gap: 8px;
+    gap: ${tokens.spacing.sm};
   }
 
   &:hover {
-    background-color: ${HOVER_BG2};
-    color: ${TEXT_PRIMARY2};
+    background-color: ${tokens.colors.surface.overlayHover};
+    color: ${tokens.colors.text.primary};
   }
 
   &:focus {
@@ -1149,20 +1557,20 @@ var BrowseButton = styled8__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR2};
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 `;
-var StyledDisclosureGroup = styled8__default.default(reactAriaComponents.DisclosureGroup)`
+var StyledDisclosureGroup = styled9__default.default(reactAriaComponents.DisclosureGroup)`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: ${tokens.spacing.sm};
   width: 100%;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 `;
-var CategoryDisclosure = styled8__default.default(reactAriaComponents.Disclosure)`
+var CategoryDisclosure = styled9__default.default(reactAriaComponents.Disclosure)`
   background-color: transparent;
   display: flex;
   flex-direction: column;
@@ -1180,24 +1588,24 @@ var CategoryDisclosure = styled8__default.default(reactAriaComponents.Disclosure
     cursor: not-allowed;
   }
 `;
-var CategoryHeader = styled8__default.default(reactAriaComponents.Button)`
+var CategoryHeader = styled9__default.default(reactAriaComponents.Button)`
   width: 100%;
-  padding: 4px 0;
+  padding: ${tokens.spacing.xs} 0;
   background: none;
   border: none;
-  color: ${TEXT_SECONDARY2};
+  color: ${tokens.colors.text.secondary};
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  transition: color 0.2s ease;
-  font-size: 12px;
-  font-weight: 600;
+  transition: color ${tokens.transitions.normal};
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
   text-transform: uppercase;
   letter-spacing: 0.5px;
 
   &:hover {
-    color: ${TEXT_PRIMARY2};
+    color: ${tokens.colors.text.primary};
   }
 
   &:focus {
@@ -1205,49 +1613,49 @@ var CategoryHeader = styled8__default.default(reactAriaComponents.Button)`
   }
 
   &[data-focus-visible] {
-    outline: 2px solid ${ACCENT_COLOR2};
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
-    border-radius: 4px;
+    border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var CategoryTitle = styled8__default.default.div`
+var CategoryTitle = styled9__default.default.div`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: ${tokens.spacing.sm};
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     gap: 6px;
   }
 `;
-styled8__default.default.img`
+styled9__default.default.img`
   width: 16px;
   height: 16px;
   opacity: 0.6;
   flex-shrink: 0;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     width: 14px;
     height: 14px;
   }
 `;
-var HashtagIcon = styled8__default.default.img`
+var HashtagIcon = styled9__default.default.img`
   width: 14px;
   height: 14px;
   opacity: 0.6;
   flex-shrink: 0;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     width: 12px;
     height: 12px;
   }
 `;
-var ChevronIcon = styled8__default.default.div`
+var ChevronIcon = styled9__default.default.div`
   display: flex;
   align-items: center;
-  transition: transform 0.2s ease;
+  transition: transform ${tokens.transitions.normal};
   transform: ${(props) => props.$isExpanded ? "rotate(0deg)" : "rotate(-90deg)"};
   flex-shrink: 0;
-  margin-left: 4px;
+  margin-left: ${tokens.spacing.xs};
 
   img {
     width: 16px;
@@ -1255,35 +1663,35 @@ var ChevronIcon = styled8__default.default.div`
     opacity: 0.6;
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     img {
       width: 14px;
       height: 14px;
     }
   }
 `;
-var CategoryDisclosurePanel = styled8__default.default(reactAriaComponents.DisclosurePanel)`
+var CategoryDisclosurePanel = styled9__default.default(reactAriaComponents.DisclosurePanel)`
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding-left: 4px;
+  padding-left: ${tokens.spacing.xs};
   width: 100%;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     padding-left: 2px;
   }
 
   &[data-entering] {
-    animation: slideDown 0.2s ease;
+    animation: slideDown ${tokens.transitions.normal};
   }
 
   @keyframes slideDown {
     from {
       opacity: 0;
-      transform: translateY(-8px);
+      transform: translateY(-${tokens.spacing.sm});
     }
     to {
       opacity: 1;
@@ -1291,29 +1699,29 @@ var CategoryDisclosurePanel = styled8__default.default(reactAriaComponents.Discl
     }
   }
 `;
-var ItemContainer = styled8__default.default.div`
+var ItemContainer = styled9__default.default.div`
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 8px; // Increased vertical padding from 4px to 10px for better breathing room
-  border-radius: 4px;
+  gap: ${tokens.spacing.sm};
+  padding: 10px ${tokens.spacing.sm}; // Increased vertical padding from 4px to 10px for better breathing room
+  border-radius: ${tokens.borderRadius.sm};
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color ${tokens.transitions.fast};
   min-width: 0;
   overflow: hidden;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     gap: 6px;
-    padding: 8px 6px; // Increased vertical padding from 4px to 8px for mobile
+    padding: ${tokens.spacing.sm} 6px; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
-    background-color: ${HOVER_BG2};
+    background-color: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ItemDisclosure = styled8__default.default(reactAriaComponents.Disclosure)`
+var ItemDisclosure = styled9__default.default(reactAriaComponents.Disclosure)`
   background-color: transparent;
-  margin-bottom: 4px;
+  margin-bottom: ${tokens.spacing.xs};
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1322,51 +1730,51 @@ var ItemDisclosure = styled8__default.default(reactAriaComponents.Disclosure)`
   overflow: hidden;
 
   &[data-expanded] {
-    background-color: rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
+    background-color: ${tokens.colors.surface.overlay};
+    border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ItemHeader = styled8__default.default(reactAriaComponents.Button)`
+var ItemHeader = styled9__default.default(reactAriaComponents.Button)`
   width: 100%;
   padding: 0;
   background: none;
   border: none;
   cursor: pointer;
-  transition: all 0.1s ease;
+  transition: all ${tokens.transitions.fast};
 
   &:focus {
     outline: none;
   }
 
   &[data-focus-visible] {
-    outline: 2px solid ${ACCENT_COLOR2};
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
-    border-radius: 4px;
+    border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var ItemDisclosurePanel = styled8__default.default(reactAriaComponents.DisclosurePanel)`
+var ItemDisclosurePanel = styled9__default.default(reactAriaComponents.DisclosurePanel)`
   padding: 6px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 0 0 8px 8px;
-  margin-top: -4px;
+  background-color: ${tokens.colors.overlay};
+  border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
+  margin-top: -${tokens.spacing.xs};
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     padding: 6px;
   }
 
   &[data-entering] {
-    animation: slideDown 0.2s ease;
+    animation: slideDown ${tokens.transitions.normal};
   }
 
   @keyframes slideDown {
     from {
       opacity: 0;
-      transform: translateY(-8px);
+      transform: translateY(-${tokens.spacing.sm});
     }
     to {
       opacity: 1;
@@ -1374,88 +1782,88 @@ var ItemDisclosurePanel = styled8__default.default(reactAriaComponents.Disclosur
     }
   }
 `;
-var ItemIcon = styled8__default.default.img`
+var ItemIcon = styled9__default.default.img`
   width: 20px;
   height: 20px;
   opacity: 0.6;
   flex-shrink: 0;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     width: 18px;
     height: 18px;
   }
 `;
-var ItemName = styled8__default.default.span`
+var ItemName = styled9__default.default.span`
   flex: 1;
-  font-size: 14px;
-  color: ${(props) => props.$dimmed ? TEXT_MUTED2 : TEXT_SECONDARY2};
-  font-weight: ${(props) => props.$dimmed ? "normal" : "500"};
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
+  font-weight: ${(props) => props.$dimmed ? tokens.typography.fontWeight.regular : tokens.typography.fontWeight.medium};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
 
-  @media (max-width: 640px) {
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
     font-size: 13px;
   }
 
   ${ItemContainer}:hover & {
-    color: ${(props) => props.$dimmed ? TEXT_SECONDARY2 : TEXT_PRIMARY2};
+    color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
   }
 `;
-var RunStatus = styled8__default.default.span`
+var RunStatus = styled9__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
   flex-shrink: 0;
   margin-left: auto;
 
-  /* Color for SVG icons */
+  /* Color for SVG icons - using token colors for status */
   img {
     filter: ${(props) => {
   switch (props.$status) {
     case "completed":
       return "brightness(0) saturate(100%) invert(73%) sepia(34%) saturate(547%) hue-rotate(99deg) brightness(91%) contrast(89%)";
-    // green #10b981
+    // success green
     case "running":
       return "brightness(0) saturate(100%) invert(78%) sepia(60%) saturate(1839%) hue-rotate(360deg) brightness(100%) contrast(94%)";
-    // yellow #f59e0b
+    // warning yellow
     case "failed":
       return "brightness(0) saturate(100%) invert(34%) sepia(94%) saturate(3446%) hue-rotate(343deg) brightness(94%) contrast(94%)";
-    // red #ef4444
+    // error red
     default:
       return "none";
   }
 }};
   }
 
-  @media (max-width: 640px) {
-    font-size: 12px;
+  @media (max-width: ${tokens.breakpoints.mobile}px) {
+    font-size: ${tokens.typography.fontSize.xs};
   }
 `;
-styled8__default.default.div`
-  margin-bottom: 12px;
-  border-radius: 12px;
-  background-color: rgba(255, 255, 255, 0.05);
+styled9__default.default.div`
+  margin-bottom: ${tokens.spacing.md};
+  border-radius: ${tokens.borderRadius.lg};
+  background-color: ${tokens.colors.surface.overlay};
   overflow: hidden;
 `;
-styled8__default.default.button`
+styled9__default.default.button`
   width: 100%;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.05);
+  padding: ${tokens.spacing.md};
+  background: ${tokens.colors.surface.overlay};
   border: none;
-  color: ${TEXT_PRIMARY2};
+  color: ${tokens.colors.text.primary};
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background-color ${tokens.transitions.normal};
   text-align: left;
 
   &:hover {
-    background-color: ${HOVER_BG2};
+    background-color: ${tokens.colors.surface.overlayHover};
   }
 
   &:focus {
@@ -1463,7 +1871,7 @@ styled8__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR2};
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: -2px;
   }
 
@@ -1473,29 +1881,29 @@ styled8__default.default.button`
 
   strong {
     display: block;
-    font-size: 14px;
-    margin-bottom: 4px;
+    font-size: ${tokens.typography.fontSize.sm};
+    margin-bottom: ${tokens.spacing.xs};
   }
 `;
-styled8__default.default.span`
-  font-size: 12px;
-  color: ${TEXT_SECONDARY2};
-  transition: transform 0.2s ease;
+styled9__default.default.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${tokens.colors.text.secondary};
+  transition: transform ${tokens.transitions.normal};
   transform: ${(props) => props.$isExpanded ? "rotate(180deg)" : "rotate(0deg)"};
 `;
-styled8__default.default.div`
-  padding: 16px;
+styled9__default.default.div`
+  padding: ${tokens.spacing.md};
   padding-top: 0;
-  background-color: rgba(0, 0, 0, 0.2);
-  color: ${TEXT_SECONDARY2};
+  background-color: ${tokens.colors.overlay};
+  color: ${tokens.colors.text.secondary};
   font-size: 13px;
-  line-height: 1.6;
-  animation: slideDown 0.2s ease;
+  line-height: ${tokens.typography.lineHeight.relaxed};
+  animation: slideDown ${tokens.transitions.normal};
 
   @keyframes slideDown {
     from {
       opacity: 0;
-      transform: translateY(-8px);
+      transform: translateY(-${tokens.spacing.sm});
     }
     to {
       opacity: 1;
@@ -1503,31 +1911,31 @@ styled8__default.default.div`
     }
   }
 `;
-var MeterContainer = styled8__default.default.div`
+var MeterContainer = styled9__default.default.div`
   max-width: 600px;
   margin: 0 auto;
 `;
-var MeterLabel = styled8__default.default.div`
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: ${TEXT_PRIMARY2};
+var MeterLabel = styled9__default.default.div`
+  font-size: ${tokens.typography.fontSize.base};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  margin-bottom: ${tokens.spacing.md};
+  color: ${tokens.colors.text.primary};
 `;
-var MeterBar = styled8__default.default.div`
+var MeterBar = styled9__default.default.div`
   width: 100%;
   height: 24px;
-  background-color: ${BG_SECONDARY};
-  border-radius: 12px;
+  background-color: ${tokens.colors.background.darker};
+  border-radius: ${tokens.borderRadius.lg};
   overflow: hidden;
   position: relative;
-  margin-bottom: 12px;
+  margin-bottom: ${tokens.spacing.md};
 `;
-var MeterFill = styled8__default.default.div`
+var MeterFill = styled9__default.default.div`
   height: 100%;
   width: ${(props) => props.$percentage}%;
   background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
-  border-radius: 12px;
-  transition: width 0.3s ease, background 0.3s ease;
+  border-radius: ${tokens.borderRadius.lg};
+  transition: width ${tokens.transitions.slow}, background ${tokens.transitions.slow};
   position: relative;
 
   &::after {
@@ -1537,7 +1945,7 @@ var MeterFill = styled8__default.default.div`
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    background: linear-gradient(90deg, transparent, ${tokens.colors.surface.overlay}, transparent);
     animation: shimmer 2s infinite;
   }
 
@@ -1550,47 +1958,47 @@ var MeterFill = styled8__default.default.div`
     }
   }
 `;
-var MeterStats = styled8__default.default.div`
-  font-size: 14px;
-  color: ${TEXT_SECONDARY2};
+var MeterStats = styled9__default.default.div`
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.secondary};
   text-align: center;
 
   small {
-    font-size: 12px;
-    color: ${TEXT_SECONDARY2};
+    font-size: ${tokens.typography.fontSize.xs};
+    color: ${tokens.colors.text.secondary};
     opacity: 0.8;
   }
 `;
-var ConnectionsContainer = styled8__default.default.div`
+var ConnectionsContainer = styled9__default.default.div`
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 `;
-var ConnectionDescription = styled8__default.default.p`
-  font-size: 14px;
-  color: ${TEXT_SECONDARY2};
-  line-height: 1.6;
-  margin-bottom: 24px;
+var ConnectionDescription = styled9__default.default.p`
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.secondary};
+  line-height: ${tokens.typography.lineHeight.relaxed};
+  margin-bottom: ${tokens.spacing.lg};
 `;
-var GoogleButton = styled8__default.default.button`
+var GoogleButton = styled9__default.default.button`
   width: 100%;
-  padding: 16px 24px;
+  padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   font-size: 15px;
-  font-weight: 600;
-  color: ${(props) => props.$isConnected ? TEXT_PRIMARY2 : "#FFFFFF"};
-  background: ${(props) => props.$isConnected ? BG_TERTIARY2 : "linear-gradient(135deg, #4285F4, #34A853)"};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${(props) => props.$isConnected ? tokens.colors.text.primary : tokens.colors.text.primary};
+  background: ${(props) => props.$isConnected ? tokens.colors.background.light : `linear-gradient(135deg, ${tokens.colors.platform.facebook}, ${tokens.colors.platform.whatsapp})`};
   border: none;
-  border-radius: 8px;
+  border-radius: ${tokens.borderRadius.md};
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all ${tokens.transitions.normal};
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: ${tokens.spacing.sm};
 
   &:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
+    box-shadow: ${tokens.shadows.lg};
   }
 
   &:active {
@@ -1602,14 +2010,14 @@ var GoogleButton = styled8__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid ${ACCENT_COLOR2};
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 
   ${(props) => props.$isConnected && `
     &:hover {
-      background-color: #ef4444;
-      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+      background-color: ${tokens.colors.error};
+      box-shadow: ${tokens.shadows.lg};
     }
   `}
 `;
@@ -1642,7 +2050,10 @@ var ICONS = {
   chevronDown: "/assets/icon-set/Icon-arrow-down-s-fill.svg",
   warning: "/assets/icon-set/Icon-error-warning-fill.svg"
 };
-function ItemWithLogs({ run, onRunSelect }) {
+function ItemWithLogs({
+  run,
+  onRunSelect
+}) {
   const [isExpanded, setIsExpanded] = react.useState(false);
   const logSections = run.logs ? [
     {
@@ -1661,96 +2072,184 @@ function ItemWithLogs({ run, onRunSelect }) {
     onRunSelect?.(run.id);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ItemDisclosure, { id: run.id, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ItemHeader,
-      {
-        slot: "trigger",
-        onClick: handleClick,
-        $isExpanded: isExpanded,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ItemContainer, { as: "div", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS[run.icon || "loader"], alt: "" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ItemName, { children: run.name }),
-          /* @__PURE__ */ jsxRuntime.jsxs(RunStatus, { $status: run.status, children: [
-            run.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.checkFill, alt: "", style: { width: "16px", height: "16px" } }),
-            run.status === "running" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.hourglass, alt: "", style: { width: "16px", height: "16px" } }),
-            run.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.closeFill, alt: "", style: { width: "16px", height: "16px" } })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-        ] })
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ItemHeader, { slot: "trigger", onClick: handleClick, $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs(ItemContainer, { as: "div", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS[run.icon || "loader"], alt: "" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ItemName, { children: run.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs(RunStatus, { $status: run.status, children: [
+        run.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.checkFill, alt: "", style: { width: "16px", height: "16px" } }),
+        run.status === "running" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.hourglass, alt: "", style: { width: "16px", height: "16px" } }),
+        run.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.closeFill, alt: "", style: { width: "16px", height: "16px" } })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
+    ] }) }),
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px" }, children: run.customContent })
     ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
+function normalizeCategory(category) {
+  if (category === "scheduled") return "executing";
+  if (category === "issues") return "failed";
+  return category;
+}
+function groupRunsByWorkflow(runs) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const run of runs) {
+    const workflowId = run.workflowId || "unknown";
+    const workflowName = run.workflowName || run.name;
+    if (!groups.has(workflowId)) {
+      groups.set(workflowId, {
+        workflowId,
+        workflowName,
+        runs: []
+      });
+    }
+    groups.get(workflowId).runs.push(run);
+  }
+  return Array.from(groups.values());
+}
+function WorkflowGroupItem({
+  group,
+  onRunSelect,
+  expandedKeys
+}) {
+  const groupId = `workflow-${group.workflowId}`;
+  const isExpanded = expandedKeys.has(groupId);
+  return /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: groupId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+          "(",
+          group.runs.length,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: group.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) })
+  ] });
+}
+function GroupedRunsRenderer({
+  groups,
+  onRunSelect,
+  expandedKeys,
+  setExpandedKeys,
+  ariaLabel,
+  emptyMessage
+}) {
+  if (groups.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: emptyMessage }) });
+  }
+  const firstGroup = groups[0];
+  if (groups.length === 1 && firstGroup && firstGroup.runs.length === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: firstGroup.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledDisclosureGroup,
+    {
+      expandedKeys,
+      onExpandedChange: setExpandedKeys,
+      allowsMultipleExpanded: true,
+      "aria-label": ariaLabel,
+      children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowGroupItem,
+        {
+          group,
+          onRunSelect,
+          expandedKeys
+        },
+        group.workflowId
+      ))
+    }
+  );
+}
 function RunsTabContent({
   runs,
-  onBrowseAutomations,
   onRunSelect
 }) {
   const [expandedKeys, setExpandedKeys] = react.useState(
-    /* @__PURE__ */ new Set(["scheduled", "completed", "issues"])
-    // All sections open by default
+    /* @__PURE__ */ new Set(["executing", "completed", "failed"])
+    // All status sections open by default
   );
-  const scheduledRuns = runs.filter((r) => r.category === "scheduled");
-  const completedRuns = runs.filter((r) => r.category === "completed");
-  const issuesRuns = runs.filter((r) => r.category === "issues");
-  const buttonRef = react.useRef(null);
-  const { buttonProps } = button.useButton(
+  const executingRuns = runs.filter((r) => normalizeCategory(r.category) === "executing");
+  const completedRuns = runs.filter((r) => normalizeCategory(r.category) === "completed");
+  const failedRuns = runs.filter((r) => normalizeCategory(r.category) === "failed");
+  const executingGroups = groupRunsByWorkflow(executingRuns);
+  const completedGroups = groupRunsByWorkflow(completedRuns);
+  const failedGroups = groupRunsByWorkflow(failedRuns);
+  return /* @__PURE__ */ jsxRuntime.jsx(RunsContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledDisclosureGroup,
     {
-      onPress: onBrowseAutomations
-    },
-    buttonRef
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(RunsContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(BrowseButton, { ...buttonProps, ref: buttonRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS.cpu, alt: "" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Browse Automations" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      StyledDisclosureGroup,
-      {
-        expandedKeys,
-        onExpandedChange: setExpandedKeys,
-        allowsMultipleExpanded: true,
-        "aria-label": "Run sections",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "scheduled", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "SCHEDULED" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("scheduled"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: scheduledRuns.length > 0 ? scheduledRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No scheduled items" }) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "completed", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "COMPLETED" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("completed"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: completedRuns.length > 0 ? completedRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No completed items" }) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "issues", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "ISSUES" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("issues"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: issuesRuns.length > 0 ? issuesRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
-          ] })
-        ]
-      }
-    )
-  ] });
+      expandedKeys,
+      onExpandedChange: setExpandedKeys,
+      allowsMultipleExpanded: true,
+      "aria-label": "Run sections",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "executing", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "EXECUTING" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("executing"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            GroupedRunsRenderer,
+            {
+              groups: executingGroups,
+              onRunSelect,
+              expandedKeys,
+              setExpandedKeys,
+              ariaLabel: "Executing workflows",
+              emptyMessage: "No executing items"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "completed", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "COMPLETED" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("completed"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            GroupedRunsRenderer,
+            {
+              groups: completedGroups,
+              onRunSelect,
+              expandedKeys,
+              setExpandedKeys,
+              ariaLabel: "Completed workflows",
+              emptyMessage: "No completed items"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "failed", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "FAILED" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("failed"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            GroupedRunsRenderer,
+            {
+              groups: failedGroups,
+              onRunSelect,
+              expandedKeys,
+              setExpandedKeys,
+              ariaLabel: "Failed workflows",
+              emptyMessage: "No failed items"
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
 }
 function UsageTabContent({
   currentUsage = 0,
@@ -1830,15 +2329,7 @@ function ConnectionsTabContent({
   const descriptionText = isConnected ? googleConnection?.displayName ? `Connected as ${googleConnection.displayName}. You can access Google services and data.` : "Your Google account is connected. You can access Google services and data." : "Connect your Google account to access Google services and integrate with your workflows.";
   return /* @__PURE__ */ jsxRuntime.jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ConnectionDescription, { children: descriptionText }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      GoogleButton,
-      {
-        ...buttonProps,
-        ref,
-        $isConnected: isConnected,
-        children: buttonText
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
     isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
@@ -1881,19 +2372,21 @@ function PaneMenus({
   onOAuthDisconnect,
   isOAuthConnecting = false,
   isOAuthLoading = false,
-  onBrowseAutomations
+  connectionsSlot,
+  workflowsSlot
 }) {
   const state = tabs.useTabListState({
-    defaultSelectedKey: activeTab,
+    selectedKey: activeTab,
     onSelectionChange: (key) => {
       if (onTabChange) {
         onTabChange(key);
       }
     },
     children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Runs", children: /* @__PURE__ */ jsxRuntime.jsx(RunsTabContent, { runs, onBrowseAutomations, onRunSelect }) }, "runs"),
+      workflowsSlot && /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Workflows", children: workflowsSlot }, "workflows"),
+      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Runs", children: /* @__PURE__ */ jsxRuntime.jsx(RunsTabContent, { runs, onRunSelect }) }, "runs"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Usage", children: /* @__PURE__ */ jsxRuntime.jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
-      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Connections", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Connections", children: connectionsSlot || /* @__PURE__ */ jsxRuntime.jsx(
         ConnectionsTabContent,
         {
           isGoogleConnected,
@@ -1913,21 +2406,11 @@ function PaneMenus({
     /* @__PURE__ */ jsxRuntime.jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var HEADER_BG = "rgba(32, 34, 37, 0.1)";
-var HEADER_BG_DARK = "rgba(24, 25, 28, 0.7)";
-var BUTTON_BG = "rgba(54, 57, 63, 0.6)";
-var BUTTON_BG_HOVER = "rgba(64, 68, 75, 0.8)";
-var breakpoints = {
-  xs: "640px",
-  sm: "768px",
-  md: "1024px",
-  lg: "1280px"
-};
-var Container7 = styled8__default.default.header`
+var Container7 = styled9__default.default.header`
   position: relative;
   width: 100%;
   height: 56px;
-  background-color: ${HEADER_BG};
+  background-color: ${tokens.colors.surface.subtle};
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   overflow: hidden;
@@ -1952,14 +2435,14 @@ var Container7 = styled8__default.default.header`
   }
 
   /* Small screens */
-  @media (min-width: ${breakpoints.xs}) {
+  @media (min-width: ${tokens.breakpoints.mobile}px) {
     &::before {
       background-image: url('/assets/bg-set/pattern/Size=sm, Type=Waves Rays2.svg');
     }
   }
 
   /* Medium screens */
-  @media (min-width: ${breakpoints.sm}) {
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
     height: 64px;
 
     &::before {
@@ -1968,14 +2451,14 @@ var Container7 = styled8__default.default.header`
   }
 
   /* Large screens */
-  @media (min-width: ${breakpoints.md}) {
+  @media (min-width: ${tokens.breakpoints.desktop}px) {
     &::before {
       background-image: url('/assets/bg-set/pattern/Size=lg, Type=Waves Rays2.svg');
     }
   }
 
   /* Extra large screens */
-  @media (min-width: ${breakpoints.lg}) {
+  @media (min-width: 1440px) {
     &::before {
       background-image: url('/assets/bg-set/pattern/Size=xl, Type=Waves Rays2.svg');
     }
@@ -1983,10 +2466,10 @@ var Container7 = styled8__default.default.header`
 
   /* Dark theme support */
   @media (prefers-color-scheme: dark) {
-    background-color: ${HEADER_BG_DARK};
+    background-color: ${tokens.colors.backdrop};
   }
 `;
-var BrandLogo = styled8__default.default.img`
+var BrandLogo = styled9__default.default.img`
   position: relative;
   z-index: 1;
   max-height: 28px;
@@ -1997,23 +2480,23 @@ var BrandLogo = styled8__default.default.img`
   user-select: none;
 
   /* Slightly larger on desktop */
-  @media (min-width: ${breakpoints.sm}) {
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
     max-height: 32px;
   }
 `;
-var SettingsButton = styled8__default.default.button`
+var SettingsButton = styled9__default.default.button`
   position: absolute;
   top: 50%;
-  right: 12px;
+  right: ${tokens.spacing.md};
   transform: translateY(-50%);
   z-index: 2;
 
   /* Button appearance */
   width: 40px;
   height: 40px;
-  border-radius: 50%;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
-  background-color: ${BUTTON_BG};
+  background-color: ${tokens.colors.surface.glass};
   cursor: pointer;
 
   /* Center the icon */
@@ -2022,11 +2505,11 @@ var SettingsButton = styled8__default.default.button`
   justify-content: center;
 
   /* Smooth transitions */
-  transition: background-color 0.2s ease, transform 0.1s ease;
+  transition: background-color ${tokens.transitions.normal}, transform ${tokens.transitions.fast};
 
   /* Hover state */
   &:hover {
-    background-color: ${BUTTON_BG_HOVER};
+    background-color: ${tokens.colors.surface.overlayHover};
   }
 
   /* Active state */
@@ -2036,7 +2519,7 @@ var SettingsButton = styled8__default.default.button`
 
   /* Focus visible state for accessibility */
   &:focus-visible {
-    outline: 2px solid #5865f2;
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 
@@ -2047,27 +2530,27 @@ var SettingsButton = styled8__default.default.button`
   }
 
   /* Responsive positioning */
-  @media (min-width: ${breakpoints.sm}) {
-    right: 16px;
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    right: ${tokens.spacing.md};
   }
 
-  @media (min-width: ${breakpoints.md}) {
-    right: 24px;
+  @media (min-width: ${tokens.breakpoints.desktop}px) {
+    right: ${tokens.spacing.lg};
   }
 `;
-var BackButton2 = styled8__default.default.button`
+var BackButton2 = styled9__default.default.button`
   position: absolute;
   top: 50%;
-  left: 12px;
+  left: ${tokens.spacing.md};
   transform: translateY(-50%);
   z-index: 2;
 
   /* Button appearance */
   width: 40px;
   height: 40px;
-  border-radius: 50%;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
-  background-color: ${BUTTON_BG};
+  background-color: ${tokens.colors.surface.glass};
   cursor: pointer;
 
   /* Center the icon */
@@ -2076,11 +2559,11 @@ var BackButton2 = styled8__default.default.button`
   justify-content: center;
 
   /* Smooth transitions */
-  transition: background-color 0.2s ease, transform 0.1s ease;
+  transition: background-color ${tokens.transitions.normal}, transform ${tokens.transitions.fast};
 
   /* Hover state */
   &:hover {
-    background-color: ${BUTTON_BG_HOVER};
+    background-color: ${tokens.colors.surface.overlayHover};
   }
 
   /* Active state */
@@ -2090,7 +2573,7 @@ var BackButton2 = styled8__default.default.button`
 
   /* Focus visible state for accessibility */
   &:focus-visible {
-    outline: 2px solid #5865f2;
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 
@@ -2101,12 +2584,12 @@ var BackButton2 = styled8__default.default.button`
   }
 
   /* Responsive positioning */
-  @media (min-width: ${breakpoints.sm}) {
-    left: 16px;
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    left: ${tokens.spacing.md};
   }
 
-  @media (min-width: ${breakpoints.md}) {
-    left: 24px;
+  @media (min-width: ${tokens.breakpoints.desktop}px) {
+    left: ${tokens.spacing.lg};
   }
 `;
 function PaneSectionHeader({
@@ -2144,7 +2627,7 @@ function PaneSectionHeader({
         onMouseEnter: () => setIsBackHovered(true),
         onMouseLeave: () => setIsBackHovered(false),
         $isHovered: isBackHovered,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left-fill", size: 20, color: "#b9bbbe" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left-fill", size: 20, color: tokens.colors.text.secondary })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { src: `/assets/bg-set/brand-logos/${brand}2.svg`, alt: brand }),
@@ -2156,46 +2639,37 @@ function PaneSectionHeader({
         onMouseEnter: () => setIsSettingsHovered(true),
         onMouseLeave: () => setIsSettingsHovered(false),
         $isHovered: isSettingsHovered,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
-          {
-            name: settingsIcon,
-            size: 20,
-            color: "#b9bbbe"
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: settingsIcon, size: 20, color: tokens.colors.text.secondary })
       }
     )
   ] });
 }
 PaneSectionHeader.displayName = "PaneSectionHeader";
-var NAV_BG3 = "#36393F";
-var NAV_BG_HOVER = "#40444b";
-var Container8 = styled8__default.default.button`
+var Container8 = styled9__default.default.button`
   /* Base button styling */
   width: 48px;
   height: 48px;
   border: none;
-  padding: 4px;
-  border-radius: ${({ $active }) => $active ? "16px" : "50%"};
-  background-color: ${NAV_BG3};
+  padding: ${tokens.spacing.xs};
+  border-radius: ${({ $active }) => $active ? tokens.borderRadius.xl : tokens.borderRadius.full};
+  background-color: ${tokens.colors.background.light};
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.15s ease-out;
+  transition: all ${tokens.transitions.fast};
   position: relative;
   overflow: hidden;
 
   /* Hover state */
   &:hover {
-    border-radius: 16px;
-    background-color: ${NAV_BG_HOVER};
+    border-radius: ${tokens.borderRadius.xl};
+    background-color: ${tokens.colors.surface.overlayHover};
   }
 
   /* Focus visible state for accessibility */
   &:focus-visible {
-    outline: 2px solid #5865f2;
+    outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
   }
 
@@ -2209,8 +2683,8 @@ var Container8 = styled8__default.default.button`
       transform: translateY(-50%);
       width: 4px;
       height: 40px;
-      background-color: #ffffff;
-      border-radius: 0 4px 4px 0;
+      background-color: ${tokens.colors.text.primary};
+      border-radius: 0 ${tokens.borderRadius.sm} ${tokens.borderRadius.sm} 0;
     }
   `}
 
@@ -2220,7 +2694,7 @@ var Container8 = styled8__default.default.button`
     cursor: not-allowed;
   }
 `;
-var LogoImage = styled8__default.default.img`
+var LogoImage = styled9__default.default.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -2241,6 +2715,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
 ServiceIcon.displayName = "ServiceIcon";
 
 exports.ActionButtons = ActionButtons;
+exports.CategoryNav = CategoryNav;
 exports.Icon = Icon;
 exports.IconNames = IconNames;
 exports.Layout = Layout;