@agentiffai/design 0.1.1 → 0.1.3

package/dist/chunk-6NGVSBJZ.js

@@ -1,2204 +0,0 @@
-import styled8, { css } from 'styled-components';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useButton } from '@react-aria/button';
-import { useRef, useState } from 'react';
-import { useMeter } from '@react-aria/meter';
-import { useTabList, useTabPanel, useTab } from '@react-aria/tabs';
-import { Item } from '@react-stately/collections';
-import { useTabListState } from '@react-stately/tabs';
-import { DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading } from 'react-aria-components';
-
-// src/components/layout/Icon/Icon.styles.ts
-var IconWrapper = styled8.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__ */ jsx(IconWrapper, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
-}
-Icon.displayName = "Icon";
-var NAV_BG = "#232428";
-var NAV_BORDER = "#1E1F22";
-var Container = styled8.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.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.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.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__ */ jsx(Container, { className, role: "navigation", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxs(ContentWrapper, { children: [
-    /* @__PURE__ */ jsx(UserStatusSlot, { children: userStatusSlot }),
-    /* @__PURE__ */ jsx(ActionButtonsSlot, { children: actionsSlot })
-  ] }) });
-}
-NavHorizontal.displayName = "NavHorizontal";
-var NAV_BG2 = "#202225";
-var NAV_SEPARATOR = "#36393F";
-var Container2 = styled8.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.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.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.span`
-  font-size: 20px;
-  line-height: 1;
-  font-weight: bold;
-`;
-var Separator = styled8.div`
-  width: 32px;
-  height: 2px;
-  background-color: ${NAV_SEPARATOR};
-  align-self: center;
-  margin: 8px auto 12px;
-  border-radius: 1px;
-`;
-var FolderGroupsSlot = styled8.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 = useRef(null);
-  const homeButtonRef = useRef(null);
-  const { buttonProps: backButtonProps } = useButton(
-    {
-      onPress: onBackClick,
-      "aria-label": "Go back"
-    },
-    backButtonRef
-  );
-  const { buttonProps: homeButtonProps } = useButton(
-    {
-      onPress: onHomeClick,
-      "aria-label": "Home"
-    },
-    homeButtonRef
-  );
-  return /* @__PURE__ */ jsxs(Container2, { className, role: "navigation", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "home-fill", size: 24, color: "white" }) }) : null }),
-    /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsx(FolderGroupsSlot, { children: folderGroupsSlot })
-  ] });
-}
-NavVertical.displayName = "NavVertical";
-var Container3 = styled8.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.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__ */ jsxs(Container3, { className, children: [
-    /* @__PURE__ */ jsx(NavVertical, { folderGroupsSlot: navVerticalSlot, onBackClick: onNavBackClick }),
-    /* @__PURE__ */ jsx(MainPane, { children: mainPaneSlot }),
-    /* @__PURE__ */ jsx(
-      NavHorizontal,
-      {
-        userStatusSlot: navHorizontalUserSlot,
-        actionsSlot: navHorizontalActionsSlot
-      }
-    )
-  ] });
-}
-Layout.displayName = "Layout";
-var Container4 = styled8.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-`;
-var ActionButton = styled8.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 && css`
-      background-color: rgba(255, 255, 255, 0.08);
-      color: #ffffff;
-    `}
-
-  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && 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 = useRef(null);
-  const { buttonProps } = useButton(
-    {
-      onPress: onClick,
-      "aria-label": label,
-      "aria-pressed": isActive
-    },
-    ref
-  );
-  return /* @__PURE__ */ jsx(
-    ActionButton,
-    {
-      ...buttonProps,
-      ref,
-      $isActive: isActive,
-      $size: size,
-      $isPrimary: isPrimary,
-      children: icon
-    }
-  );
-}
-function ActionButtons({
-  onCalendarClick,
-  onSettingsClick,
-  onChatClick,
-  isCalendarActive = false,
-  isSettingsActive = false,
-  isChatActive = false,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(Container4, { className, children: [
-    /* @__PURE__ */ jsx(
-      ActionButtonItem,
-      {
-        icon: /* @__PURE__ */ jsx(Icon, { name: "calendar-fill", size: 16, color: "#b9bbbe" }),
-        label: "Calendar",
-        onClick: onCalendarClick,
-        isActive: isCalendarActive,
-        size: 32
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ActionButtonItem,
-      {
-        icon: /* @__PURE__ */ jsx(Icon, { name: "settings-3-fill", size: 16, color: "#b9bbbe" }),
-        label: "Settings",
-        onClick: onSettingsClick,
-        isActive: isSettingsActive,
-        size: 32
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ActionButtonItem,
-      {
-        icon: /* @__PURE__ */ jsx(Icon, { name: "chat-1-fill", size: 16, color: "#b9bbbe" }),
-        label: "Chat",
-        onClick: onChatClick,
-        isActive: isChatActive,
-        size: 32
-      }
-    )
-  ] });
-}
-ActionButtons.displayName = "ActionButtons";
-var statusColors = {
-  online: "#43B581",
-  idle: "#FAA61A",
-  busy: "#F04747",
-  offline: "#747F8D"
-};
-var Container5 = styled8.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.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.div`
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-`;
-var WorkflowName = styled8.span`
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-var WorkflowStatus = styled8.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: #b9bbbe;
-  font-size: 11px;
-  line-height: 1.2;
-`;
-var StatusIndicatorOuter = styled8.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.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 = useRef(null);
-  const handlePress = () => {
-    if (onClick) onClick();
-    if (onPress) onPress({});
-  };
-  const { buttonProps } = useButton(
-    {
-      ...ariaProps,
-      onPress: handlePress,
-      isDisabled,
-      "aria-label": ariaProps["aria-label"] || `${workflowName} workflow, status: ${displayStatus}`
-    },
-    ref
-  );
-  return /* @__PURE__ */ jsxs(Container5, { ...buttonProps, ref, className, $isDisabled: isDisabled, children: [
-    /* @__PURE__ */ jsxs(IconWrapper2, { children: [
-      icon,
-      /* @__PURE__ */ jsx(StatusIndicatorOuter, { $status: status, children: /* @__PURE__ */ jsx(StatusIndicatorInner, { $status: status }) })
-    ] }),
-    /* @__PURE__ */ jsxs(WorkflowInfo, { children: [
-      /* @__PURE__ */ jsx(WorkflowName, { children: workflowName }),
-      /* @__PURE__ */ 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.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.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.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.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding-left: 4px;
-  margin-top: 2px;
-  min-width: 0;
-  overflow: hidden;
-`;
-var DarkNotificationItemWrapper = styled8.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.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.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.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.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] = 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__ */ jsx(DarkNotificationCardContainer, { className, "aria-label": ariaLabel, role: "region", children: sections.map((section) => /* @__PURE__ */ 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 = useRef(null);
-  const { buttonProps } = useButton(
-    {
-      onPress: onToggle,
-      "aria-label": `${section.title} section, ${isCollapsed ? "collapsed" : "expanded"}`,
-      "aria-expanded": !isCollapsed
-    },
-    headerRef
-  );
-  return /* @__PURE__ */ jsxs("section", { "aria-label": `${section.title} actions`, children: [
-    /* @__PURE__ */ jsxs(DarkSectionHeader, { ...buttonProps, ref: headerRef, children: [
-      section.title,
-      /* @__PURE__ */ jsx(DarkChevronIcon, { $isExpanded: !isCollapsed, "aria-hidden": "true", children: /* @__PURE__ */ 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__ */ jsx("title", { children: "Expand/collapse icon" }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M4 5L7 8L10 5",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
-          ]
-        }
-      ) })
-    ] }),
-    !isCollapsed && /* @__PURE__ */ jsx(DarkSectionContent, { role: "list", children: section.items.map((item) => /* @__PURE__ */ jsx(
-      DarkNotificationItemComponent,
-      {
-        item,
-        isSelected: item.id === selectedItemId,
-        onItemClick,
-        onMenuClick
-      },
-      item.id
-    )) })
-  ] });
-};
-var DarkNotificationItemComponent = ({
-  item,
-  isSelected,
-  onItemClick,
-  onMenuClick
-}) => {
-  const itemRef = useRef(null);
-  const menuRef = useRef(null);
-  const { buttonProps: itemButtonProps } = useButton(
-    {
-      onPress: () => onItemClick?.(item),
-      "aria-label": `Action: ${item.text}`,
-      "aria-current": isSelected ? "true" : void 0
-    },
-    itemRef
-  );
-  const { buttonProps: menuButtonProps } = useButton(
-    {
-      onPress: () => onMenuClick?.(item),
-      "aria-label": `Options for ${item.text}`
-    },
-    menuRef
-  );
-  const handleItemKeyDown = (e) => {
-    if (isSelected && e.key === "Tab" && !e.shiftKey) {
-      return;
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    DarkNotificationItemWrapper,
-    {
-      ...itemButtonProps,
-      ref: itemRef,
-      $isSelected: isSelected,
-      $hasIcon: !!item.icon,
-      role: "listitem",
-      onKeyDown: handleItemKeyDown,
-      children: [
-        /* @__PURE__ */ jsx(DarkItemIcon, { $iconColor: item.iconColor, $hasCustomIcon: !!item.icon, children: item.icon || /* @__PURE__ */ 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__ */ jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(DarkItemText, { $isSelected: isSelected, children: item.text }),
-        item.timestamp && /* @__PURE__ */ jsx(DarkTimestamp, { children: item.timestamp }),
-        isSelected && onMenuClick && /* @__PURE__ */ jsx(
-          DarkMenuButton,
-          {
-            ...menuButtonProps,
-            ref: menuRef,
-            onClick: (e) => {
-              e.stopPropagation();
-              menuButtonProps.onClick?.(e);
-            },
-            children: /* @__PURE__ */ 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__ */ jsx("title", { children: "More options" }),
-                  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "3", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ 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.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.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.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.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.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.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(DisclosureGroup)`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-`;
-var CategoryDisclosure = styled8(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(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.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  @media (max-width: 640px) {
-    gap: 6px;
-  }
-`;
-styled8.img`
-  width: 16px;
-  height: 16px;
-  opacity: 0.6;
-  flex-shrink: 0;
-
-  @media (max-width: 640px) {
-    width: 14px;
-    height: 14px;
-  }
-`;
-var HashtagIcon = styled8.img`
-  width: 14px;
-  height: 14px;
-  opacity: 0.6;
-  flex-shrink: 0;
-
-  @media (max-width: 640px) {
-    width: 12px;
-    height: 12px;
-  }
-`;
-var ChevronIcon = styled8.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(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.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(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(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(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.img`
-  width: 20px;
-  height: 20px;
-  opacity: 0.6;
-  flex-shrink: 0;
-
-  @media (max-width: 640px) {
-    width: 18px;
-    height: 18px;
-  }
-`;
-var ItemName = styled8.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.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.div`
-  margin-bottom: 12px;
-  border-radius: 12px;
-  background-color: ${BG_SECONDARY};
-  overflow: hidden;
-`;
-styled8.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.span`
-  font-size: 12px;
-  color: ${TEXT_SECONDARY2};
-  transition: transform 0.2s ease;
-  transform: ${(props) => props.$isExpanded ? "rotate(180deg)" : "rotate(0deg)"};
-`;
-styled8.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.div`
-  max-width: 600px;
-  margin: 0 auto;
-`;
-var MeterLabel = styled8.div`
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: ${TEXT_PRIMARY2};
-`;
-var MeterBar = styled8.div`
-  width: 100%;
-  height: 24px;
-  background-color: ${BG_SECONDARY};
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  margin-bottom: 12px;
-`;
-var MeterFill = styled8.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.div`
-  font-size: 14px;
-  color: ${TEXT_SECONDARY2};
-  text-align: center;
-
-  small {
-    font-size: 12px;
-    color: ${TEXT_SECONDARY2};
-    opacity: 0.8;
-  }
-`;
-var ConnectionsContainer = styled8.div`
-  max-width: 500px;
-  margin: 0 auto;
-  text-align: center;
-`;
-var ConnectionDescription = styled8.p`
-  font-size: 14px;
-  color: ${TEXT_SECONDARY2};
-  line-height: 1.6;
-  margin-bottom: 24px;
-`;
-var GoogleButton = styled8.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] = 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__ */ jsxs(ItemDisclosure, { id: run.id, children: [
-    /* @__PURE__ */ jsx(
-      ItemHeader,
-      {
-        slot: "trigger",
-        onClick: () => setIsExpanded(!isExpanded),
-        $isExpanded: isExpanded,
-        children: /* @__PURE__ */ jsxs(ItemContainer, { as: "div", children: [
-          /* @__PURE__ */ jsx(ItemIcon, { src: ICONS[run.icon || "bell"], alt: "" }),
-          /* @__PURE__ */ jsx(ItemName, { children: run.name }),
-          /* @__PURE__ */ jsxs(RunStatus, { $status: run.status, children: [
-            run.status === "completed" && "\u2713",
-            run.status === "running" && "\u27F3",
-            run.status === "failed" && "\u2715"
-          ] }),
-          /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-        ] })
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
-  ] });
-}
-function RunsTabContent({
-  runs,
-  onBrowseAutomations
-}) {
-  const [expandedKeys, setExpandedKeys] = 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 = useRef(null);
-  const { buttonProps } = useButton(
-    {
-      onPress: onBrowseAutomations
-    },
-    buttonRef
-  );
-  return /* @__PURE__ */ jsxs(RunsContainer, { children: [
-    /* @__PURE__ */ jsxs(BrowseButton, { ...buttonProps, ref: buttonRef, children: [
-      /* @__PURE__ */ jsx(ItemIcon, { src: ICONS.cpu, alt: "" }),
-      /* @__PURE__ */ jsx("span", { children: "Browse Automations" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      StyledDisclosureGroup,
-      {
-        expandedKeys,
-        onExpandedChange: setExpandedKeys,
-        allowsMultipleExpanded: true,
-        "aria-label": "Run sections",
-        children: [
-          /* @__PURE__ */ jsxs(CategoryDisclosure, { id: "scheduled", children: [
-            /* @__PURE__ */ jsx(Heading, { level: 3, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", children: [
-              /* @__PURE__ */ jsxs(CategoryTitle, { children: [
-                /* @__PURE__ */ jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
-                /* @__PURE__ */ jsx("span", { children: "SCHEDULED" })
-              ] }),
-              /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: expandedKeys.has("scheduled"), children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-            ] }) }),
-            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: scheduledRuns.length > 0 ? scheduledRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No scheduled items" }) }) })
-          ] }),
-          /* @__PURE__ */ jsxs(CategoryDisclosure, { id: "completed", children: [
-            /* @__PURE__ */ jsx(Heading, { level: 3, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", children: [
-              /* @__PURE__ */ jsxs(CategoryTitle, { children: [
-                /* @__PURE__ */ jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
-                /* @__PURE__ */ jsx("span", { children: "COMPLETED" })
-              ] }),
-              /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: expandedKeys.has("completed"), children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-            ] }) }),
-            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: completedRuns.length > 0 ? completedRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No completed items" }) }) })
-          ] }),
-          /* @__PURE__ */ jsxs(CategoryDisclosure, { id: "issues", children: [
-            /* @__PURE__ */ jsx(Heading, { level: 3, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", children: [
-              /* @__PURE__ */ jsxs(CategoryTitle, { children: [
-                /* @__PURE__ */ jsx(HashtagIcon, { src: ICONS.hashtag, alt: "" }),
-                /* @__PURE__ */ jsx("span", { children: "ISSUES" })
-              ] }),
-              /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: expandedKeys.has("issues"), children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
-            ] }) }),
-            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: issuesRuns.length > 0 ? issuesRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function UsageTabContent({
-  currentUsage = 0,
-  maxUsage = 1e5
-}) {
-  const ref = useRef(null);
-  const { meterProps, labelProps } = 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__ */ jsxs(MeterContainer, { children: [
-    /* @__PURE__ */ jsx(MeterLabel, { ...labelProps, children: "Token Usage" }),
-    /* @__PURE__ */ jsx(MeterBar, { ...meterProps, ref, children: /* @__PURE__ */ jsx(MeterFill, { $percentage: percentage, $color: color }) }),
-    /* @__PURE__ */ jsxs(MeterStats, { children: [
-      percentage,
-      "% of ",
-      maxUsage.toLocaleString(),
-      " tokens used",
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsxs("small", { children: [
-        currentUsage.toLocaleString(),
-        " / ",
-        maxUsage.toLocaleString(),
-        " tokens"
-      ] })
-    ] })
-  ] });
-}
-function ConnectionsTabContent({
-  isGoogleConnected = false,
-  onGoogleConnect,
-  onGoogleDisconnect,
-  oauthConnections,
-  onOAuthConnect,
-  onOAuthDisconnect,
-  isOAuthConnecting = false,
-  isOAuthLoading = false
-}) {
-  const ref = useRef(null);
-  const useRealOAuthData = oauthConnections && onOAuthConnect && onOAuthDisconnect;
-  const googleConnection = useRealOAuthData ? oauthConnections.find((c) => c.provider === "google") : void 0;
-  const isConnected = useRealOAuthData ? googleConnection?.connected || false : isGoogleConnected;
-  const handlePress = () => {
-    if (useRealOAuthData) {
-      if (isConnected && googleConnection) {
-        onOAuthDisconnect(googleConnection.id);
-      } else {
-        onOAuthConnect("google");
-      }
-    } else {
-      if (isConnected && onGoogleDisconnect) {
-        onGoogleDisconnect();
-      } else if (!isConnected && onGoogleConnect) {
-        onGoogleConnect();
-      }
-    }
-  };
-  const isButtonDisabled = isOAuthLoading || isOAuthConnecting;
-  const { buttonProps } = useButton(
-    {
-      onPress: handlePress,
-      isDisabled: isButtonDisabled
-    },
-    ref
-  );
-  if (isOAuthLoading) {
-    return /* @__PURE__ */ jsx(ConnectionsContainer, { children: /* @__PURE__ */ jsx(ConnectionDescription, { children: "Loading connections..." }) });
-  }
-  const buttonText = isOAuthConnecting ? "Connecting..." : isConnected ? "\u2713 Disconnect from Google" : "Connect with Google";
-  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__ */ jsxs(ConnectionsContainer, { children: [
-    /* @__PURE__ */ jsx(ConnectionDescription, { children: descriptionText }),
-    /* @__PURE__ */ jsx(
-      GoogleButton,
-      {
-        ...buttonProps,
-        ref,
-        $isConnected: isConnected,
-        children: buttonText
-      }
-    ),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
-      "Connected services: ",
-      googleConnection.scopes.join(", ")
-    ] })
-  ] });
-}
-function Tab({ item, state }) {
-  const ref = useRef(null);
-  const { tabProps } = useTab({ key: item.key }, state, ref);
-  return /* @__PURE__ */ jsx(TabButton, { ...tabProps, ref, $isSelected: state.selectedKey === item.key, children: item.rendered });
-}
-function TabList({
-  state,
-  ...props
-}) {
-  const ref = useRef(null);
-  const { tabListProps } = useTabList(props, state, ref);
-  return /* @__PURE__ */ jsx(TabListWrapper, { ...tabListProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(Tab, { item, state }, item.key)) });
-}
-function TabPanel({
-  state,
-  ...props
-}) {
-  const ref = useRef(null);
-  const { tabPanelProps } = useTabPanel(props, state, ref);
-  return /* @__PURE__ */ jsx(TabPanelWrapper, { ...tabPanelProps, ref, children: state.selectedItem?.props.children });
-}
-function PaneMenus({
-  activeTab = "runs",
-  onTabChange,
-  runs = [],
-  currentUsage = 0,
-  maxUsage = 1e5,
-  isGoogleConnected = false,
-  onGoogleConnect,
-  onGoogleDisconnect,
-  oauthConnections,
-  onOAuthConnect,
-  onOAuthDisconnect,
-  isOAuthConnecting = false,
-  isOAuthLoading = false,
-  onBrowseAutomations
-}) {
-  const state = useTabListState({
-    defaultSelectedKey: activeTab,
-    onSelectionChange: (key) => {
-      if (onTabChange) {
-        onTabChange(key);
-      }
-    },
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Item, { title: "Runs", children: /* @__PURE__ */ jsx(RunsTabContent, { runs, onBrowseAutomations }) }, "runs"),
-      /* @__PURE__ */ jsx(Item, { title: "Usage", children: /* @__PURE__ */ jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
-      /* @__PURE__ */ jsx(Item, { title: "Connections", children: /* @__PURE__ */ jsx(
-        ConnectionsTabContent,
-        {
-          isGoogleConnected,
-          onGoogleConnect,
-          onGoogleDisconnect,
-          oauthConnections,
-          onOAuthConnect,
-          onOAuthDisconnect,
-          isOAuthConnecting,
-          isOAuthLoading
-        }
-      ) }, "connections")
-    ] })
-  });
-  return /* @__PURE__ */ jsxs(Container6, { children: [
-    /* @__PURE__ */ jsx(TabList, { state, "aria-label": "Main pane menu" }),
-    /* @__PURE__ */ 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.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.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.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.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] = useState(false);
-  const [isSettingsHovered, setIsSettingsHovered] = useState(false);
-  const backButtonRef = useRef(null);
-  const settingsButtonRef = useRef(null);
-  const { buttonProps: backButtonProps } = useButton(
-    {
-      onPress: onBackClick,
-      "aria-label": "Go back"
-    },
-    backButtonRef
-  );
-  const { buttonProps: settingsButtonProps } = useButton(
-    {
-      onPress: onSettingsClick,
-      "aria-label": "Settings"
-    },
-    settingsButtonRef
-  );
-  return /* @__PURE__ */ jsxs(Container7, { className, role: "banner", "aria-label": ariaLabel, children: [
-    onBackClick && /* @__PURE__ */ jsx(
-      BackButton2,
-      {
-        ...backButtonProps,
-        ref: backButtonRef,
-        onMouseEnter: () => setIsBackHovered(true),
-        onMouseLeave: () => setIsBackHovered(false),
-        $isHovered: isBackHovered,
-        children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left-fill", size: 20, color: "#b9bbbe" })
-      }
-    ),
-    /* @__PURE__ */ jsx(BrandLogo, { src: `/assets/bg-set/brand-logos/${brand}2.svg`, alt: brand }),
-    /* @__PURE__ */ jsx(
-      SettingsButton,
-      {
-        ...settingsButtonProps,
-        ref: settingsButtonRef,
-        onMouseEnter: () => setIsSettingsHovered(true),
-        onMouseLeave: () => setIsSettingsHovered(false),
-        $isHovered: isSettingsHovered,
-        children: /* @__PURE__ */ 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.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.img`
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  pointer-events: none;
-  user-select: none;
-`;
-function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
-  const ref = useRef(null);
-  const { buttonProps } = useButton(
-    {
-      ...ariaProps,
-      "aria-pressed": active
-    },
-    ref
-  );
-  return /* @__PURE__ */ jsx(Container8, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
-}
-ServiceIcon.displayName = "ServiceIcon";
-
-export { ActionButtons, Icon, IconNames, Layout, NavHorizontal, NavVertical, PaneMenus, PaneSectionHeader, ServiceIcon, WorkflowStatusCard };
-//# sourceMappingURL=chunk-6NGVSBJZ.js.map
-//# sourceMappingURL=chunk-6NGVSBJZ.js.map