@agentiffai/design 0.1.0

package/dist/chunk-KNSPBTTJ.cjs

@@ -0,0 +1,2158 @@
+'use strict';
+
+var styled8 = 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');
+var tabs = require('@react-stately/tabs');
+var reactAriaComponents = require('react-aria-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styled8__default = /*#__PURE__*/_interopDefault(styled8);
+
+// src/components/layout/Icon/Icon.styles.ts
+var IconWrapper = styled8__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  color: ${({ $color }) => $color};
+  line-height: 1;
+
+  img {
+    width: 100%;
+    height: 100%;
+    filter: ${({ $color }) => {
+  if ($color === "currentColor" || !$color) return "inherit";
+  if ($color === "white" || $color === "#ffffff" || $color === "#fff") {
+    return "brightness(0) saturate(100%) invert(100%)";
+  }
+  if ($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") {
+    return "brightness(0) saturate(100%) invert(38%) sepia(97%) saturate(1459%) hue-rotate(334deg) brightness(95%) contrast(93%)";
+  }
+  return "none";
+}};
+  }
+`;
+
+// src/components/layout/Icon/icons.ts
+var ICON_BASE_PATH = "/assets/icon-set";
+var IconNames = {
+  MIC: "mic-fill",
+  MIC_OFF: "mic-off-fill",
+  HEADPHONE: "headphone-fill",
+  VOLUME_MUTE: "volume-mute-fill",
+  SETTINGS: "settings-3-fill",
+  SETTINGS_FILL: "settings-fill",
+  SETTINGS_LINE: "settings-line",
+  HOME: "home-fill",
+  ADD_CIRCLE: "add-circle-fill",
+  COMPASS_DISCOVER: "compass-discover-fill",
+  DOWNLOAD: "download-2-fill",
+  ARROW_LEFT: "arrow-left-fill",
+  CALENDAR: "calendar-fill",
+  CHAT: "chat-1-fill"
+};
+var iconFiles = {
+  "mic-fill": "Icon-mic-fill.svg",
+  "mic-off-fill": "Icon-mic-off-fill.svg",
+  "headphone-fill": "Icon-headphone-fill.svg",
+  "volume-mute-fill": "Icon-volume-mute-fill.svg",
+  "settings-3-fill": "Icon-settings-3-fill.svg",
+  "settings-fill": "Icon-settings-fill.svg",
+  "settings-line": "Icon-settings-line.svg",
+  "home-fill": "Icon-home-fill.svg",
+  "add-circle-fill": "Icon-add-circle-fill.svg",
+  "compass-discover-fill": "Icon-compass-discover-fill.svg",
+  "download-2-fill": "Icon-download-2-fill.svg",
+  "arrow-left-fill": "Icon-arrow-left-fill.svg",
+  "calendar-fill": "Icon-calendar-fill.svg",
+  "chat-1-fill": "Icon-chat-1-fill.svg"
+};
+function getIconPath(name) {
+  return `${ICON_BASE_PATH}/${iconFiles[name]}`;
+}
+function Icon({
+  name,
+  size = 20,
+  color = "currentColor",
+  className,
+  ...imgProps
+}) {
+  const iconPath = getIconPath(name);
+  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`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: ${NAV_BG};
+  border-top: 1px solid ${NAV_BORDER};
+  height: 52px;
+  z-index: 10;
+
+  /* Dark theme support */
+  @media (prefers-color-scheme: dark) {
+    background-color: #1a1b1e;
+  }
+`;
+var ContentWrapper = styled8__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  padding: 0 8px;
+  max-width: 100%;
+
+  /* Responsive padding */
+  @media (min-width: 768px) {
+    padding: 0 16px;
+  }
+`;
+var UserStatusSlot = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  min-width: 0; /* Allow flex item to shrink */
+  flex: 0 1 auto;
+
+  /* Handle overflow for long usernames */
+  > * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+var ActionButtonsSlot = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+
+  /* Ensure buttons stay visible */
+  @media (min-width: 480px) {
+    gap: 8px;
+  }
+`;
+function NavHorizontal({
+  userStatusSlot,
+  actionsSlot,
+  className,
+  "aria-label": ariaLabel = "Horizontal navigation bar"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { className, role: "navigation", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(UserStatusSlot, { children: userStatusSlot }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionButtonsSlot, { children: actionsSlot })
+  ] }) });
+}
+NavHorizontal.displayName = "NavHorizontal";
+var NAV_BG2 = "#202225";
+var NAV_SEPARATOR = "#36393F";
+var Container2 = styled8__default.default.nav`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 52px; /* Account for horizontal nav height */
+  width: 72px;
+  background-color: ${NAV_BG2};
+  display: flex;
+  flex-direction: column;
+  z-index: 9; /* Below horizontal nav and chat sidebar */
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none; /* Firefox */
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Dark theme support */
+  @media (prefers-color-scheme: dark) {
+    background-color: #1a1b1e;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    width: 60px; /* Match MainPane left offset on mobile */
+  }
+`;
+var TopSection = styled8__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 56px; /* Same as PaneSectionHeader on mobile */
+  padding: 0;
+  flex-shrink: 0;
+  position: relative;
+
+  @media (min-width: 768px) {
+    height: 64px; /* Same as PaneSectionHeader on desktop */
+  }
+`;
+var BackButton = styled8__default.default.button`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: ${NAV_SEPARATOR};
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: #5865F2;
+  }
+
+  &:active {
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5865F2;
+    outline-offset: 2px;
+  }
+`;
+styled8__default.default.span`
+  font-size: 20px;
+  line-height: 1;
+  font-weight: bold;
+`;
+var Separator = styled8__default.default.div`
+  width: 32px;
+  height: 2px;
+  background-color: ${NAV_SEPARATOR};
+  align-self: center;
+  margin: 8px auto 12px;
+  border-radius: 1px;
+`;
+var FolderGroupsSlot = styled8__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 12px;
+  flex: 1;
+
+  /* Server/workspace icons styling */
+  > * {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    transition: border-radius 0.15s ease-out;
+    cursor: pointer;
+
+    &:hover {
+      border-radius: 16px;
+    }
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    padding: 0 6px 12px; /* Reduce horizontal padding on mobile */
+  }
+`;
+function NavVertical({
+  onBackClick,
+  onHomeClick,
+  folderGroupsSlot,
+  className,
+  "aria-label": ariaLabel = "Vertical navigation sidebar"
+}) {
+  const backButtonRef = react.useRef(null);
+  const homeButtonRef = react.useRef(null);
+  const { buttonProps: backButtonProps } = button.useButton(
+    {
+      onPress: onBackClick,
+      "aria-label": "Go back"
+    },
+    backButtonRef
+  );
+  const { buttonProps: homeButtonProps } = button.useButton(
+    {
+      onPress: onHomeClick,
+      "aria-label": "Home"
+    },
+    homeButtonRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { className, role: "navigation", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home-fill", size: 24, color: "white" }) }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(FolderGroupsSlot, { children: folderGroupsSlot })
+  ] });
+}
+NavVertical.displayName = "NavVertical";
+var Container3 = styled8__default.default.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background-color: #36393f;
+  overflow: hidden;
+
+  /* Dark theme support */
+  @media (prefers-color-scheme: dark) {
+    background-color: #2f3136;
+  }
+`;
+var MainPane = styled8__default.default.main`
+  position: absolute;
+  top: 0;
+  left: 72px; /* Width of vertical nav */
+  right: 0;
+  bottom: 52px; /* Height of horizontal nav */
+  background-color: #36393f;
+  overflow: auto;
+
+  /* Custom scrollbar styling */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #202225;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #18191c;
+  }
+
+  /* Firefox scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: #202225 transparent;
+
+  /* Dark theme support */
+  @media (prefers-color-scheme: dark) {
+    background-color: #2f3136;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    left: 60px; /* Smaller nav on mobile */
+  }
+`;
+function Layout({
+  mainPaneSlot,
+  navVerticalSlot,
+  navHorizontalUserSlot,
+  navHorizontalActionsSlot,
+  onNavBackClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NavVertical, { folderGroupsSlot: navVerticalSlot, onBackClick: onNavBackClick }),
+    /* @__PURE__ */ jsxRuntime.jsx(MainPane, { children: mainPaneSlot }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NavHorizontal,
+      {
+        userStatusSlot: navHorizontalUserSlot,
+        actionsSlot: navHorizontalActionsSlot
+      }
+    )
+  ] });
+}
+Layout.displayName = "Layout";
+var Container4 = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+`;
+var ActionButton = styled8__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: none;
+  background-color: ${({ $isPrimary }) => $isPrimary ? "#5865F2" : "transparent"};
+  color: ${({ $isPrimary }) => $isPrimary ? "#FFFFFF" : "#b9bbbe"};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  font-size: 16px;
+
+  &:hover {
+    background-color: ${({ $isPrimary }) => $isPrimary ? "#4752C4" : "rgba(255, 255, 255, 0.1)"};
+    color: ${({ $isPrimary }) => $isPrimary ? "#FFFFFF" : "#dcddde"};
+  }
+
+  &: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 && styled8.css`
+      background-color: #4752C4;
+      color: #ffffff;
+    `}
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5865f2;
+    outline-offset: 2px;
+  }
+`;
+function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
+  const ref = react.useRef(null);
+  const { buttonProps } = button.useButton(
+    {
+      onPress: onClick,
+      "aria-label": label,
+      "aria-pressed": isActive
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ActionButton,
+    {
+      ...buttonProps,
+      ref,
+      $isActive: isActive,
+      $size: size,
+      $isPrimary: isPrimary,
+      children: icon
+    }
+  );
+}
+function ActionButtons({
+  onCalendarClick,
+  onSettingsClick,
+  onChatClick: _onChatClick,
+  isCalendarActive = false,
+  isSettingsActive = false,
+  isChatActive: _isChatActive = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container4, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActionButtonItem,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "calendar-fill", size: 16, color: "#b9bbbe" }),
+        label: "Calendar",
+        onClick: onCalendarClick,
+        isActive: isCalendarActive,
+        size: 32
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActionButtonItem,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-fill", size: 16, color: "#b9bbbe" }),
+        label: "Settings",
+        onClick: onSettingsClick,
+        isActive: isSettingsActive,
+        size: 32
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "36px", height: "36px", visibility: "hidden" }, "aria-hidden": "true" })
+  ] });
+}
+ActionButtons.displayName = "ActionButtons";
+var statusColors = {
+  online: "#43B581",
+  idle: "#FAA61A",
+  busy: "#F04747",
+  offline: "#747F8D"
+};
+var Container5 = styled8__default.default.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
+  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);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5865F2;
+    outline-offset: 2px;
+  }
+
+  &:active:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+`;
+var IconWrapper2 = styled8__default.default.div`
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: #36393f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+var WorkflowInfo = styled8__default.default.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+var WorkflowName = styled8__default.default.span`
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  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 StatusIndicatorOuter = styled8__default.default.span`
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #232428;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+var StatusIndicatorInner = styled8__default.default.span`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${({ $status }) => statusColors[$status]};
+  flex-shrink: 0;
+`;
+function WorkflowStatusCard({
+  icon,
+  workflowName,
+  status = "offline",
+  statusText,
+  className,
+  onClick,
+  onPress,
+  isDisabled,
+  ...ariaProps
+}) {
+  const displayStatus = statusText || status;
+  const ref = react.useRef(null);
+  const handlePress = () => {
+    if (onClick) onClick();
+    if (onPress) onPress({});
+  };
+  const { buttonProps } = button.useButton(
+    {
+      ...ariaProps,
+      onPress: handlePress,
+      isDisabled,
+      "aria-label": ariaProps["aria-label"] || `${workflowName} workflow, status: ${displayStatus}`
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container5, { ...buttonProps, ref, className, $isDisabled: isDisabled, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(IconWrapper2, { children: [
+      icon,
+      /* @__PURE__ */ jsxRuntime.jsx(StatusIndicatorOuter, { $status: status, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIndicatorInner, { $status: status }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(WorkflowInfo, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(WorkflowName, { children: workflowName }),
+      /* @__PURE__ */ jsxRuntime.jsx(WorkflowStatus, { children: displayStatus })
+    ] })
+  ] });
+}
+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`
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  background: ${BG_TERTIARY};
+  border-radius: 8px;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+`;
+var DarkSectionHeader = styled8__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 2px;
+  border: none;
+  background: transparent;
+  font-family: ${(props) => props.theme?.fonts?.body || "system-ui, sans-serif"};
+  font-size: 11px;
+  font-weight: 600;
+  color: ${TEXT_SECONDARY};
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: ${TEXT_PRIMARY};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR};
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+`;
+var DarkChevronIcon = styled8__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  color: ${TEXT_MUTED};
+
+  ${(props) => props.$isExpanded ? `
+    transform: rotate(0deg);
+  ` : `
+    transform: rotate(-90deg);
+  `}
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+var DarkSectionContent = styled8__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-left: 4px;
+  margin-top: 2px;
+  min-width: 0;
+  overflow: hidden;
+`;
+var DarkNotificationItemWrapper = styled8__default.default.button`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 6px;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  min-width: 0;
+  overflow: hidden;
+
+  /* Default state - transparent background */
+  background-color: ${(props) => props.$isSelected ? ACCENT_COLOR : "transparent"};
+
+  /* Hover state */
+  &:hover:not(:disabled) {
+    background-color: ${(props) => props.$isSelected ? "#4752C4" : HOVER_BG};
+  }
+
+  /* Active state */
+  &:active:not(:disabled) {
+    transform: scale(0.99);
+  }
+
+  /* Focus state */
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR};
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var DarkItemIcon = styled8__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%"};
+  background-color: ${(props) => props.$iconColor || "transparent"};
+  color: ${(props) => props.$hasCustomIcon ? TEXT_PRIMARY : TEXT_MUTED};
+  font-size: 12px;
+
+  /* Default circle icon styling */
+  ${(props) => !props.$hasCustomIcon && `
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  `}
+
+  /* Custom icon (emoji or colored icon) styling */
+  ${(props) => props.$hasCustomIcon && `
+    padding: 2px;
+  `}
+`;
+var DarkItemText = styled8__default.default.span`
+  flex: 1;
+  font-family: ${(props) => props.theme?.fonts?.body || "system-ui, sans-serif"};
+  font-size: 11px;
+  font-weight: ${(props) => props.$isSelected ? "500" : "400"};
+  color: ${(props) => props.$isSelected ? TEXT_PRIMARY : TEXT_SECONDARY};
+  line-height: 1.3;
+  word-wrap: break-word;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var DarkMenuButton = styled8__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  color: ${TEXT_PRIMARY};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:active:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.15);
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR};
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+var DarkTimestamp = styled8__default.default.span`
+  font-size: 10px;
+  color: ${TEXT_MUTED};
+  white-space: normal;
+  word-wrap: break-word;
+  text-align: right;
+  max-width: 60px;
+`;
+var DarkNotificationCard = ({
+  sections,
+  onItemClick,
+  selectedItemId,
+  onMenuClick,
+  className,
+  "aria-label": ariaLabel = "Action log history"
+}) => {
+  const [collapsedSections, setCollapsedSections] = react.useState(() => {
+    const initial = {};
+    for (const section of sections) {
+      initial[section.title] = section.isCollapsed || false;
+    }
+    return initial;
+  });
+  const toggleSection = (sectionTitle) => {
+    setCollapsedSections((prev) => ({
+      ...prev,
+      [sectionTitle]: !prev[sectionTitle]
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCardContainer, { className, "aria-label": ariaLabel, role: "region", children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
+    DarkSectionComponent,
+    {
+      section,
+      isCollapsed: collapsedSections[section.title] ?? false,
+      onToggle: () => toggleSection(section.title),
+      onItemClick,
+      selectedItemId,
+      onMenuClick
+    },
+    section.title
+  )) });
+};
+var DarkSectionComponent = ({
+  section,
+  isCollapsed,
+  onToggle,
+  onItemClick,
+  selectedItemId,
+  onMenuClick
+}) => {
+  const headerRef = react.useRef(null);
+  const { buttonProps } = button.useButton(
+    {
+      onPress: onToggle,
+      "aria-label": `${section.title} section, ${isCollapsed ? "collapsed" : "expanded"}`,
+      "aria-expanded": !isCollapsed
+    },
+    headerRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": `${section.title} actions`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DarkSectionHeader, { ...buttonProps, ref: headerRef, children: [
+      section.title,
+      /* @__PURE__ */ jsxRuntime.jsx(DarkChevronIcon, { $isExpanded: !isCollapsed, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 14 14",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          role: "img",
+          "aria-label": "Expand/collapse icon",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Expand/collapse icon" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M4 5L7 8L10 5",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(DarkSectionContent, { role: "list", children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      DarkNotificationItemComponent,
+      {
+        item,
+        isSelected: item.id === selectedItemId,
+        onItemClick,
+        onMenuClick
+      },
+      item.id
+    )) })
+  ] });
+};
+var DarkNotificationItemComponent = ({
+  item,
+  isSelected,
+  onItemClick,
+  onMenuClick
+}) => {
+  const itemRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const { buttonProps: itemButtonProps } = button.useButton(
+    {
+      onPress: () => onItemClick?.(item),
+      "aria-label": `Action: ${item.text}`,
+      "aria-current": isSelected ? "true" : void 0
+    },
+    itemRef
+  );
+  const { buttonProps: menuButtonProps } = button.useButton(
+    {
+      onPress: () => onMenuClick?.(item),
+      "aria-label": `Options for ${item.text}`
+    },
+    menuRef
+  );
+  const handleItemKeyDown = (e) => {
+    if (isSelected && e.key === "Tab" && !e.shiftKey) {
+      return;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DarkNotificationItemWrapper,
+    {
+      ...itemButtonProps,
+      ref: itemRef,
+      $isSelected: isSelected,
+      $hasIcon: !!item.icon,
+      role: "listitem",
+      onKeyDown: handleItemKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DarkItemIcon, { $iconColor: item.iconColor, $hasCustomIcon: !!item.icon, children: item.icon || /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(DarkItemText, { $isSelected: isSelected, children: item.text }),
+        item.timestamp && /* @__PURE__ */ jsxRuntime.jsx(DarkTimestamp, { children: item.timestamp }),
+        isSelected && onMenuClick && /* @__PURE__ */ jsxRuntime.jsx(
+          DarkMenuButton,
+          {
+            ...menuButtonProps,
+            ref: menuRef,
+            onClick: (e) => {
+              e.stopPropagation();
+              menuButtonProps.onClick?.(e);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("title", { children: "More options" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "3", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "13", r: "1", fill: "currentColor" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+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`
+  width: 100%;
+  height: 100%;
+  background-color: ${BG_PRIMARY};
+  color: ${TEXT_PRIMARY2};
+  display: flex;
+  flex-direction: column;
+  font-family: ${(props) => props.theme?.fonts?.body || "system-ui, sans-serif"};
+  overflow: hidden; // Prevent content from escaping container bounds
+`;
+var TabListWrapper = styled8__default.default.div`
+  display: flex;
+  border-bottom: 2px solid ${BG_TERTIARY2};
+  background-color: ${BG_SECONDARY};
+  padding: 0 16px;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex-shrink: 0; // Prevent shrinking when content overflows
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (max-width: 640px) {
+    padding: 0 8px;
+    gap: 4px;
+  }
+`;
+var TabButton = styled8__default.default.button`
+  padding: 12px 20px;
+  background: none;
+  border: none;
+  color: ${(props) => props.$isSelected ? TEXT_PRIMARY2 : TEXT_SECONDARY2};
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  @media (max-width: 640px) {
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+
+  &:hover {
+    color: ${TEXT_PRIMARY2};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR2};
+    outline-offset: -2px;
+    border-radius: 4px;
+  }
+
+  ${(props) => props.$isSelected && `
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: ${ACCENT_COLOR2};
+    }
+  `}
+`;
+var TabPanelWrapper = styled8__default.default.div`
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+  overflow-x: hidden; // Prevent horizontal overflow
+  background-color: ${BG_PRIMARY};
+  min-height: 0; // Enable proper flex shrinking and scrolling
+
+  @media (max-width: 640px) {
+    padding: 16px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 12px;
+  }
+
+  /* Custom scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: ${BG_TERTIARY2} ${BG_PRIMARY};
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${BG_PRIMARY};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${BG_TERTIARY2};
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #4a4d52;
+  }
+`;
+var RunsContainer = styled8__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    gap: 16px;
+  }
+`;
+var BrowseButton = styled8__default.default.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background-color: ${BG_SECONDARY};
+  border: 1px solid ${BG_TERTIARY2};
+  border-radius: 8px;
+  color: ${TEXT_SECONDARY2};
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    padding: 10px 12px;
+    font-size: 13px;
+    gap: 8px;
+  }
+
+  &:hover {
+    background-color: ${HOVER_BG2};
+    color: ${TEXT_PRIMARY2};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR2};
+    outline-offset: 2px;
+  }
+`;
+var StyledDisclosureGroup = styled8__default.default(reactAriaComponents.DisclosureGroup)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+`;
+var CategoryDisclosure = styled8__default.default(reactAriaComponents.Disclosure)`
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  &[data-expanded] {
+    /* Styles when expanded */
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var CategoryHeader = styled8__default.default(reactAriaComponents.Button)`
+  width: 100%;
+  padding: 4px 0;
+  background: none;
+  border: none;
+  color: ${TEXT_SECONDARY2};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  &:hover {
+    color: ${TEXT_PRIMARY2};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid ${ACCENT_COLOR2};
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+`;
+var CategoryTitle = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  @media (max-width: 640px) {
+    gap: 6px;
+  }
+`;
+styled8__default.default.img`
+  width: 16px;
+  height: 16px;
+  opacity: 0.6;
+  flex-shrink: 0;
+
+  @media (max-width: 640px) {
+    width: 14px;
+    height: 14px;
+  }
+`;
+var HashtagIcon = styled8__default.default.img`
+  width: 14px;
+  height: 14px;
+  opacity: 0.6;
+  flex-shrink: 0;
+
+  @media (max-width: 640px) {
+    width: 12px;
+    height: 12px;
+  }
+`;
+var ChevronIcon = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+  transform: ${(props) => props.$isExpanded ? "rotate(0deg)" : "rotate(-90deg)"};
+  flex-shrink: 0;
+  margin-left: 4px;
+
+  img {
+    width: 16px;
+    height: 16px;
+    opacity: 0.6;
+  }
+
+  @media (max-width: 640px) {
+    img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+`;
+var CategoryDisclosurePanel = styled8__default.default(reactAriaComponents.DisclosurePanel)`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-left: 4px;
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    padding-left: 2px;
+  }
+
+  &[data-entering] {
+    animation: slideDown 0.2s ease;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var ItemContainer = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  min-width: 0;
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    gap: 6px;
+    padding: 4px 6px;
+  }
+
+  &:hover {
+    background-color: ${HOVER_BG2};
+  }
+`;
+var ItemDisclosure = styled8__default.default(reactAriaComponents.Disclosure)`
+  background-color: transparent;
+  margin-bottom: 4px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  &[data-expanded] {
+    background-color: ${BG_SECONDARY};
+    border-radius: 8px;
+  }
+`;
+var ItemHeader = styled8__default.default(reactAriaComponents.Button)`
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.1s ease;
+
+  &:focus {
+    outline: none;
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid ${ACCENT_COLOR2};
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+`;
+var ItemDisclosurePanel = styled8__default.default(reactAriaComponents.DisclosurePanel)`
+  padding: 6px;
+  background-color: ${BG_SECONDARY};
+  border-radius: 0 0 8px 8px;
+  margin-top: -4px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    padding: 6px;
+  }
+
+  &[data-entering] {
+    animation: slideDown 0.2s ease;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var ItemIcon = styled8__default.default.img`
+  width: 20px;
+  height: 20px;
+  opacity: 0.6;
+  flex-shrink: 0;
+
+  @media (max-width: 640px) {
+    width: 18px;
+    height: 18px;
+  }
+`;
+var ItemName = styled8__default.default.span`
+  flex: 1;
+  font-size: 14px;
+  color: ${(props) => props.$dimmed ? TEXT_MUTED2 : TEXT_SECONDARY2};
+  font-weight: ${(props) => props.$dimmed ? "normal" : "500"};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+
+  @media (max-width: 640px) {
+    font-size: 13px;
+  }
+
+  ${ItemContainer}:hover & {
+    color: ${(props) => props.$dimmed ? TEXT_SECONDARY2 : TEXT_PRIMARY2};
+  }
+`;
+var RunStatus = styled8__default.default.span`
+  font-size: 14px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: ${(props) => {
+  switch (props.$status) {
+    case "completed":
+      return "#10b981";
+    // green
+    case "running":
+      return "#f59e0b";
+    // yellow
+    case "failed":
+      return "#ef4444";
+    // red
+    default:
+      return TEXT_SECONDARY2;
+  }
+}};
+
+  @media (max-width: 640px) {
+    font-size: 12px;
+  }
+`;
+styled8__default.default.div`
+  margin-bottom: 12px;
+  border-radius: 12px;
+  background-color: ${BG_SECONDARY};
+  overflow: hidden;
+`;
+styled8__default.default.button`
+  width: 100%;
+  padding: 16px;
+  background: ${BG_SECONDARY};
+  border: none;
+  color: ${TEXT_PRIMARY2};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  text-align: left;
+
+  &:hover {
+    background-color: ${HOVER_BG2};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR2};
+    outline-offset: -2px;
+  }
+
+  > div {
+    flex: 1;
+  }
+
+  strong {
+    display: block;
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+`;
+styled8__default.default.span`
+  font-size: 12px;
+  color: ${TEXT_SECONDARY2};
+  transition: transform 0.2s ease;
+  transform: ${(props) => props.$isExpanded ? "rotate(180deg)" : "rotate(0deg)"};
+`;
+styled8__default.default.div`
+  padding: 16px;
+  padding-top: 0;
+  background-color: ${BG_TERTIARY2};
+  color: ${TEXT_SECONDARY2};
+  font-size: 13px;
+  line-height: 1.6;
+  animation: slideDown 0.2s ease;
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var MeterContainer = styled8__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 MeterBar = styled8__default.default.div`
+  width: 100%;
+  height: 24px;
+  background-color: ${BG_SECONDARY};
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 12px;
+`;
+var MeterFill = styled8__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;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: shimmer 2s infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+var MeterStats = styled8__default.default.div`
+  font-size: 14px;
+  color: ${TEXT_SECONDARY2};
+  text-align: center;
+
+  small {
+    font-size: 12px;
+    color: ${TEXT_SECONDARY2};
+    opacity: 0.8;
+  }
+`;
+var ConnectionsContainer = styled8__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 GoogleButton = styled8__default.default.button`
+  width: 100%;
+  padding: 16px 24px;
+  font-size: 15px;
+  font-weight: 600;
+  color: ${(props) => props.$isConnected ? TEXT_PRIMARY2 : "#FFFFFF"};
+  background: ${(props) => props.$isConnected ? BG_TERTIARY2 : "linear-gradient(135deg, #4285F4, #34A853)"};
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ACCENT_COLOR2};
+    outline-offset: 2px;
+  }
+
+  ${(props) => props.$isConnected && `
+    &:hover {
+      background-color: #ef4444;
+      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+    }
+  `}
+`;
+var ICONS = {
+  hashtag: "/assets/icon-set/Icon-hashtag.svg",
+  bell: "/assets/icon-set/Icon-bell-fill.svg",
+  file: "/assets/icon-set/Icon-file-3-fill.svg",
+  link: "/assets/icon-set/Icon-external-link-fill.svg",
+  chat: "/assets/icon-set/Icon-chat-1-fill.svg",
+  community: "/assets/icon-set/Icon-community-fill.svg",
+  cpu: "/assets/icon-set/Icon-cpu-fill.svg",
+  chevronDown: "/assets/icon-set/Icon-arrow-down-s-fill.svg",
+  warning: "/assets/icon-set/Icon-error-warning-fill.svg"
+};
+function ItemWithLogs({ run }) {
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  const logSections = run.logs ? [
+    {
+      title: "Action History",
+      items: run.logs.map((log) => ({
+        id: log.id,
+        text: log.text,
+        icon: log.icon,
+        iconColor: log.iconColor,
+        timestamp: log.timestamp
+      }))
+    }
+  ] : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(ItemDisclosure, { id: run.id, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ItemHeader,
+      {
+        slot: "trigger",
+        onClick: () => setIsExpanded(!isExpanded),
+        $isExpanded: isExpanded,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ItemContainer, { as: "div", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS[run.icon || "bell"], alt: "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ItemName, { children: run.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(RunStatus, { $status: run.status, children: [
+            run.status === "completed" && "\u2713",
+            run.status === "running" && "\u27F3",
+            run.status === "failed" && "\u2715"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
+        ] })
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: 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 RunsTabContent({
+  runs,
+  onBrowseAutomations
+}) {
+  const [expandedKeys, setExpandedKeys] = react.useState(
+    /* @__PURE__ */ new Set(["scheduled", "completed", "issues"])
+    // All 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(
+    {
+      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 }, 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 }, 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 }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function UsageTabContent({
+  currentUsage = 0,
+  maxUsage = 1e5
+}) {
+  const ref = react.useRef(null);
+  const { meterProps, labelProps } = meter.useMeter({
+    label: "Token Usage",
+    value: currentUsage,
+    minValue: 0,
+    maxValue: maxUsage
+  });
+  const percentage = Math.round(currentUsage / maxUsage * 100);
+  let color = "#10b981";
+  if (percentage >= 75)
+    color = "#ef4444";
+  else if (percentage >= 50) color = "#f59e0b";
+  return /* @__PURE__ */ jsxRuntime.jsxs(MeterContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MeterLabel, { ...labelProps, children: "Token Usage" }),
+    /* @__PURE__ */ jsxRuntime.jsx(MeterBar, { ...meterProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(MeterFill, { $percentage: percentage, $color: color }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(MeterStats, { children: [
+      percentage,
+      "% of ",
+      maxUsage.toLocaleString(),
+      " tokens used",
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+        currentUsage.toLocaleString(),
+        " / ",
+        maxUsage.toLocaleString(),
+        " tokens"
+      ] })
+    ] })
+  ] });
+}
+function ConnectionsTabContent({
+  isGoogleConnected = false,
+  onGoogleConnect,
+  onGoogleDisconnect
+}) {
+  const ref = react.useRef(null);
+  const { buttonProps } = button.useButton(
+    {
+      onPress: isGoogleConnected ? onGoogleDisconnect : onGoogleConnect
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ConnectionsContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ConnectionDescription, { children: isGoogleConnected ? "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." }),
+    /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isGoogleConnected, children: isGoogleConnected ? "\u2713 Disconnect from Google" : "Connect with Google" })
+  ] });
+}
+function Tab({ item, state }) {
+  const ref = react.useRef(null);
+  const { tabProps } = tabs$1.useTab({ key: item.key }, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabButton, { ...tabProps, ref, $isSelected: state.selectedKey === item.key, children: item.rendered });
+}
+function TabList({
+  state,
+  ...props
+}) {
+  const ref = react.useRef(null);
+  const { tabListProps } = tabs$1.useTabList(props, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabListWrapper, { ...tabListProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsxRuntime.jsx(Tab, { item, state }, item.key)) });
+}
+function TabPanel({
+  state,
+  ...props
+}) {
+  const ref = react.useRef(null);
+  const { tabPanelProps } = tabs$1.useTabPanel(props, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabPanelWrapper, { ...tabPanelProps, ref, children: state.selectedItem?.props.children });
+}
+function PaneMenus({
+  activeTab = "runs",
+  onTabChange,
+  runs = [],
+  currentUsage = 0,
+  maxUsage = 1e5,
+  isGoogleConnected = false,
+  onGoogleConnect,
+  onGoogleDisconnect,
+  onBrowseAutomations
+}) {
+  const state = tabs.useTabListState({
+    defaultSelectedKey: 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 }) }, "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(
+        ConnectionsTabContent,
+        {
+          isGoogleConnected,
+          onGoogleConnect,
+          onGoogleDisconnect
+        }
+      ) }, "connections")
+    ] })
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container6, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TabList, { state, "aria-label": "Main pane menu" }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabPanel, { state }, state.selectedItem?.key)
+  ] });
+}
+var HEADER_BG = "#202225";
+var HEADER_BG_DARK = "#18191c";
+var BUTTON_BG = "#36393f";
+var BUTTON_BG_HOVER = "#40444b";
+var breakpoints = {
+  xs: "640px",
+  sm: "768px",
+  md: "1024px",
+  lg: "1280px"
+};
+var Container7 = styled8__default.default.header`
+  position: relative;
+  width: 100%;
+  height: 56px;
+  background-color: ${HEADER_BG};
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Background pattern - responsive sizes */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('/assets/bg-set/pattern/Size=xs, Type=Waves Rays2.svg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.6;
+    z-index: 0;
+  }
+
+  /* Small screens */
+  @media (min-width: ${breakpoints.xs}) {
+    &::before {
+      background-image: url('/assets/bg-set/pattern/Size=sm, Type=Waves Rays2.svg');
+    }
+  }
+
+  /* Medium screens */
+  @media (min-width: ${breakpoints.sm}) {
+    height: 64px;
+
+    &::before {
+      background-image: url('/assets/bg-set/pattern/Size=md, Type=Waves Rays2.svg');
+    }
+  }
+
+  /* Large screens */
+  @media (min-width: ${breakpoints.md}) {
+    &::before {
+      background-image: url('/assets/bg-set/pattern/Size=lg, Type=Waves Rays2.svg');
+    }
+  }
+
+  /* Extra large screens */
+  @media (min-width: ${breakpoints.lg}) {
+    &::before {
+      background-image: url('/assets/bg-set/pattern/Size=xl, Type=Waves Rays2.svg');
+    }
+  }
+
+  /* Dark theme support */
+  @media (prefers-color-scheme: dark) {
+    background-color: ${HEADER_BG_DARK};
+  }
+`;
+var BrandLogo = styled8__default.default.img`
+  position: relative;
+  z-index: 1;
+  max-height: 28px;
+  height: auto;
+  width: auto;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+
+  /* Slightly larger on desktop */
+  @media (min-width: ${breakpoints.sm}) {
+    max-height: 32px;
+  }
+`;
+var SettingsButton = styled8__default.default.button`
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  z-index: 2;
+
+  /* Button appearance */
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: ${BUTTON_BG};
+  cursor: pointer;
+
+  /* Center the icon */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Smooth transitions */
+  transition: background-color 0.2s ease, transform 0.1s ease;
+
+  /* Hover state */
+  &:hover {
+    background-color: ${BUTTON_BG_HOVER};
+  }
+
+  /* Active state */
+  &:active {
+    transform: translateY(-50%) scale(0.95);
+  }
+
+  /* Focus visible state for accessibility */
+  &:focus-visible {
+    outline: 2px solid #5865f2;
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Responsive positioning */
+  @media (min-width: ${breakpoints.sm}) {
+    right: 16px;
+  }
+
+  @media (min-width: ${breakpoints.md}) {
+    right: 24px;
+  }
+`;
+var BackButton2 = styled8__default.default.button`
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
+  z-index: 2;
+
+  /* Button appearance */
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: ${BUTTON_BG};
+  cursor: pointer;
+
+  /* Center the icon */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Smooth transitions */
+  transition: background-color 0.2s ease, transform 0.1s ease;
+
+  /* Hover state */
+  &:hover {
+    background-color: ${BUTTON_BG_HOVER};
+  }
+
+  /* Active state */
+  &:active {
+    transform: translateY(-50%) scale(0.95);
+  }
+
+  /* Focus visible state for accessibility */
+  &:focus-visible {
+    outline: 2px solid #5865f2;
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Responsive positioning */
+  @media (min-width: ${breakpoints.sm}) {
+    left: 16px;
+  }
+
+  @media (min-width: ${breakpoints.md}) {
+    left: 24px;
+  }
+`;
+function PaneSectionHeader({
+  brand = "Google",
+  onBackClick,
+  onSettingsClick,
+  className,
+  "aria-label": ariaLabel = "Pane section header"
+}) {
+  const [isBackHovered, setIsBackHovered] = react.useState(false);
+  const [isSettingsHovered, setIsSettingsHovered] = react.useState(false);
+  const backButtonRef = react.useRef(null);
+  const settingsButtonRef = react.useRef(null);
+  const { buttonProps: backButtonProps } = button.useButton(
+    {
+      onPress: onBackClick,
+      "aria-label": "Go back"
+    },
+    backButtonRef
+  );
+  const { buttonProps: settingsButtonProps } = button.useButton(
+    {
+      onPress: onSettingsClick,
+      "aria-label": "Settings"
+    },
+    settingsButtonRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container7, { className, role: "banner", "aria-label": ariaLabel, children: [
+    onBackClick && /* @__PURE__ */ jsxRuntime.jsx(
+      BackButton2,
+      {
+        ...backButtonProps,
+        ref: backButtonRef,
+        onMouseEnter: () => setIsBackHovered(true),
+        onMouseLeave: () => setIsBackHovered(false),
+        $isHovered: isBackHovered,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left-fill", size: 20, color: "#b9bbbe" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { src: `/assets/bg-set/brand-logos/${brand}2.svg`, alt: brand }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SettingsButton,
+      {
+        ...settingsButtonProps,
+        ref: settingsButtonRef,
+        onMouseEnter: () => setIsSettingsHovered(true),
+        onMouseLeave: () => setIsSettingsHovered(false),
+        $isHovered: isSettingsHovered,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            name: isSettingsHovered ? "settings-line" : "settings-fill",
+            size: 20,
+            color: "#b9bbbe"
+          }
+        )
+      }
+    )
+  ] });
+}
+PaneSectionHeader.displayName = "PaneSectionHeader";
+var NAV_BG3 = "#36393F";
+var NAV_BG_HOVER = "#40444b";
+var Container8 = styled8__default.default.button`
+  /* Base button styling */
+  width: 48px;
+  height: 48px;
+  border: none;
+  padding: 4px;
+  border-radius: ${({ $active }) => $active ? "16px" : "50%"};
+  background-color: ${NAV_BG3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease-out;
+  position: relative;
+  overflow: hidden;
+
+  /* Hover state */
+  &:hover {
+    border-radius: 16px;
+    background-color: ${NAV_BG_HOVER};
+  }
+
+  /* Focus visible state for accessibility */
+  &:focus-visible {
+    outline: 2px solid #5865f2;
+    outline-offset: 2px;
+  }
+
+  /* Active indicator */
+  ${({ $active }) => $active && `
+    &::before {
+      content: '';
+      position: absolute;
+      left: -16px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 40px;
+      background-color: #ffffff;
+      border-radius: 0 4px 4px 0;
+    }
+  `}
+
+  /* Disabled state */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var LogoImage = styled8__default.default.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+`;
+function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
+  const ref = react.useRef(null);
+  const { buttonProps } = button.useButton(
+    {
+      ...ariaProps,
+      "aria-pressed": active
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Container8, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
+}
+ServiceIcon.displayName = "ServiceIcon";
+
+exports.ActionButtons = ActionButtons;
+exports.Icon = Icon;
+exports.IconNames = IconNames;
+exports.Layout = Layout;
+exports.NavHorizontal = NavHorizontal;
+exports.NavVertical = NavVertical;
+exports.PaneMenus = PaneMenus;
+exports.PaneSectionHeader = PaneSectionHeader;
+exports.ServiceIcon = ServiceIcon;
+exports.WorkflowStatusCard = WorkflowStatusCard;
+//# sourceMappingURL=chunk-KNSPBTTJ.cjs.map
+//# sourceMappingURL=chunk-KNSPBTTJ.cjs.map