npm - @agentiffai/design - Versions diffs - 1.3.23 → 1.3.25 - Mend

@agentiffai/design 1.3.23 → 1.3.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/copilotkit/index.cjs +5 -2
package/dist/copilotkit/index.cjs.map +1 -1
package/dist/copilotkit/index.js +5 -2
package/dist/copilotkit/index.js.map +1 -1
package/dist/icons/index.cjs.map +1 -1
package/dist/icons/index.js.map +1 -1
package/dist/index.cjs +684 -502
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +28 -2
package/dist/index.d.ts +28 -2
package/dist/index.js +633 -453
package/dist/index.js.map +1 -1
package/dist/layout/index.cjs +44 -54
package/dist/layout/index.cjs.map +1 -1
package/dist/layout/index.d.cts +6 -2
package/dist/layout/index.d.ts +6 -2
package/dist/layout/index.js +44 -54
package/dist/layout/index.js.map +1 -1
package/dist/theme/index.cjs +1 -1
package/dist/theme/index.cjs.map +1 -1
package/dist/theme/index.d.cts +3 -3
package/dist/theme/index.d.ts +3 -3
package/dist/theme/index.js +1 -1
package/dist/theme/index.js.map +1 -1
package/dist/workflow/index.cjs +1 -1
package/dist/workflow/index.cjs.map +1 -1
package/dist/workflow/index.js +1 -1
package/dist/workflow/index.js.map +1 -1
package/package.json +1 -1
package/public/assets/icon-set/Icon-question-circle-line.svg +1 -0

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import React4, { memo, useRef, useEffect, useMemo, useState, useCallback, useId } from 'react';
-import styled48, { keyframes, css, createGlobalStyle } from 'styled-components';
+import styled50, { keyframes, css, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useButton as useButton$1 } from 'react-aria';
 import { useButton } from '@react-aria/button';
 import { useMeter } from '@react-aria/meter';
 import { useTabList, useTabPanel, useTab } from '@react-aria/tabs';
@@ -39,7 +40,7 @@ var tokens = {
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
-      tertiary: "#6B7280",
+      tertiary: "#9CA3AF",
       disabled: "#4B5563"
     },
     // Semantic colors
@@ -309,7 +310,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container = styled48.div`
+var Container = styled50.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -321,7 +322,7 @@ var Container = styled48.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled48.div`
+var Avatar = styled50.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -332,23 +333,23 @@ var Avatar = styled48.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled48.svg`
+var HeadphonesIcon = styled50.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled48.div`
+var Content = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots = styled48.div`
+var LoadingDots = styled50.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled48.span`
+var Dot = styled50.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -366,7 +367,7 @@ var Dot = styled48.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message = styled48.span`
+var Message = styled50.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -426,7 +427,194 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var ChatInputContainer = styled48.div`
+var StyledContainer = styled50.div`
+  display: flex;
+  width: 100%;
+  height: 52px;
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  padding: ${tokens.spacing.xs};
+  gap: ${tokens.spacing.xs};
+`;
+var StyledOption = styled50.button`
+  flex: 1;
+  height: 44px;
+  background: ${({ $isActive }) => $isActive ? tokens.colors.primary : tokens.colors.background.light};
+  border: none;
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.spacing.xs};
+  padding: 0;
+  transition: background ${tokens.transitions.fast};
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+var StyledLabel = styled50.span`
+  font-family: Inter, sans-serif;
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  font-size: 14px;
+  line-height: 1.5714285714285714em;
+  color: ${tokens.colors.text.primary};
+`;
+var StyledBadge = styled50.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  background: ${tokens.colors.surface.overlayHover};
+  border-radius: ${tokens.borderRadius.full};
+  font-family: Inter, sans-serif;
+  font-weight: ${tokens.typography.fontWeight.bold};
+  font-size: 11px;
+  line-height: 1.4545454545454546em;
+  color: ${tokens.colors.text.primary};
+`;
+function BillingToggle({
+  value,
+  onChange,
+  discountText = "30% Off"
+}) {
+  const monthlyRef = useRef(null);
+  const yearlyRef = useRef(null);
+  const monthlyProps = {
+    onPress: () => onChange?.("monthly")
+  };
+  const yearlyProps = {
+    onPress: () => onChange?.("yearly")
+  };
+  const { buttonProps: monthlyButtonProps } = useButton$1(monthlyProps, monthlyRef);
+  const { buttonProps: yearlyButtonProps } = useButton$1(yearlyProps, yearlyRef);
+  return /* @__PURE__ */ jsxs(StyledContainer, { children: [
+    /* @__PURE__ */ jsx(
+      StyledOption,
+      {
+        ...monthlyButtonProps,
+        ref: monthlyRef,
+        $isActive: value === "monthly",
+        children: /* @__PURE__ */ jsx(StyledLabel, { $isActive: value === "monthly", children: "Monthly" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      StyledOption,
+      {
+        ...yearlyButtonProps,
+        ref: yearlyRef,
+        $isActive: value === "yearly",
+        children: [
+          /* @__PURE__ */ jsx(StyledLabel, { $isActive: value === "yearly", children: "Yearly" }),
+          /* @__PURE__ */ jsx(StyledBadge, { children: discountText })
+        ]
+      }
+    )
+  ] });
+}
+var StyledCard = styled50.div`
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.md};
+  width: 100%;
+  padding: 10px 12px;
+  position: relative;
+`;
+var StyledHeader = styled50.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2px;
+`;
+var StyledBadge2 = styled50.span`
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  font-size: 13px;
+  line-height: 1.4;
+  color: ${tokens.colors.primary};
+`;
+var StyledLabel2 = styled50.span`
+  font-weight: ${tokens.typography.fontWeight.bold};
+  font-size: 14px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.primary};
+`;
+var StyledDescription = styled50.p`
+  font-size: 12px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.secondary};
+  margin: 0 0 6px 0;
+`;
+var StyledDivider = styled50.div`
+  width: 100%;
+  height: 1px;
+  background: ${tokens.colors.border.default};
+  margin-bottom: 6px;
+`;
+var StyledFooter = styled50.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var StyledCredits = styled50.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+var StyledCheckIcon = styled50.svg`
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+`;
+var StyledCreditsText = styled50.span`
+  font-size: 13px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.primary};
+`;
+var StyledExecutions = styled50.span`
+  font-size: 11px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.secondary};
+  text-align: right;
+`;
+function formatPrice(price, billingInterval = "monthly") {
+  if (price == null) return "Free";
+  if (billingInterval === "annual") return `$${(price * 12).toFixed(2)}/year`;
+  return `$${price.toFixed(2)}/mo`;
+}
+function TrialPlanCard({
+  badge = "Trial",
+  price = null,
+  billingInterval = "monthly",
+  description = "Explore the platform risk-free",
+  executions = "~ 100 executions",
+  credits = "1,000 credits"
+}) {
+  return /* @__PURE__ */ jsxs(StyledCard, { children: [
+    /* @__PURE__ */ jsxs(StyledHeader, { children: [
+      /* @__PURE__ */ jsx(StyledBadge2, { children: badge }),
+      /* @__PURE__ */ jsx(StyledLabel2, { children: formatPrice(price, billingInterval) })
+    ] }),
+    /* @__PURE__ */ jsx(StyledDescription, { children: description }),
+    /* @__PURE__ */ jsx(StyledDivider, {}),
+    /* @__PURE__ */ jsxs(StyledFooter, { children: [
+      /* @__PURE__ */ jsxs(StyledCredits, { children: [
+        /* @__PURE__ */ jsx(StyledCheckIcon, { viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.33 10L8.33 15L16.67 5",
+            stroke: "#FFFFFF",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(StyledCreditsText, { children: credits })
+      ] }),
+      /* @__PURE__ */ jsx(StyledExecutions, { children: executions })
+    ] })
+  ] });
+}
+var ChatInputContainer = styled50.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -442,7 +630,7 @@ var ChatInputContainer = styled48.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled48.div`
+var SuggestionsWrapper = styled50.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -451,7 +639,7 @@ var SuggestionsWrapper = styled48.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled48.button`
+var SuggestionButton = styled50.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -490,7 +678,7 @@ var SuggestionButton = styled48.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled48.div`
+var InputWrapper = styled50.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -508,7 +696,7 @@ var InputWrapper = styled48.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled48.textarea`
+var InputField = styled50.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -533,7 +721,7 @@ var InputField = styled48.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled48.button`
+var SubmitButton = styled50.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -714,7 +902,7 @@ var SubmitButtonComponent = ({
   ) });
 };
 ChatInput.displayName = "ChatInput";
-var NavigationContainer = styled48.div`
+var NavigationContainer = styled50.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -731,7 +919,7 @@ var NavigationContainer = styled48.div`
     box-shadow: none !important;
   }
 `;
-var CategoryGroup = styled48.div`
+var CategoryGroup = styled50.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -743,7 +931,7 @@ var CategoryGroup = styled48.div`
     border-radius: 0 !important;
   }
 `;
-var CategoryButton = styled48.button`
+var CategoryButton = styled50.button`
   width: 48px;
   height: 48px;
   border: none;
@@ -768,7 +956,7 @@ var CategoryButton = styled48.button`
     outline-offset: 2px;
   }
 `;
-var CategoryLabel = styled48.span`
+var CategoryLabel = styled50.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
@@ -778,7 +966,7 @@ var CategoryLabel = styled48.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SubItemList = styled48.div`
+var SubItemList = styled50.div`
   display: ${({ $expanded }) => $expanded ? "flex" : "none"};
   flex-direction: column;
   align-items: center;
@@ -786,7 +974,7 @@ var SubItemList = styled48.div`
   margin-top: ${tokens.spacing.xs};
   width: 100%;
 `;
-var SubItemButton = styled48.button`
+var SubItemButton = styled50.button`
   width: 32px;
   height: 32px;
   border: none;
@@ -810,7 +998,7 @@ var SubItemButton = styled48.button`
     outline-offset: 2px;
   }
 `;
-var CountBadge = styled48.span`
+var CountBadge = styled50.span`
   position: absolute;
   top: -2px;
   right: -2px;
@@ -836,7 +1024,7 @@ var filterBadgeIn = keyframes`
     transform: scale(1);
   }
 `;
-var FilterBadge = styled48.div`
+var FilterBadge = styled50.div`
   position: absolute;
   bottom: -${tokens.spacing.xs};
   right: -${tokens.spacing.xs};
@@ -855,13 +1043,13 @@ var FilterBadge = styled48.div`
     fill: ${tokens.colors.text.primary};
   }
 `;
-var CategoryIconImg = styled48.img`
+var CategoryIconImg = styled50.img`
   width: ${({ $size }) => $size || 24}px;
   height: ${({ $size }) => $size || 24}px;
   object-fit: contain;
   filter: ${({ $active }) => $active ? "brightness(0) invert(1)" : "none"};
 `;
-var SubItemIconImg = styled48.img`
+var SubItemIconImg = styled50.img`
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   object-fit: contain;
@@ -976,7 +1164,7 @@ function CategoryNav({
   }) });
 }
 CategoryNav.displayName = "CategoryNav";
-var IconWrapper = styled48.span`
+var IconWrapper = styled50.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1022,6 +1210,7 @@ var IconNames = {
   FLOW_CHART: "flow-chart",
   LOGOUT_CIRCLE_R_FILL: "logout-circle-r-fill",
   LOGOUT_CIRCLE_R_LINE: "logout-circle-r-line",
+  QUESTION_LINE: "question-line",
   SIDE_BAR_FILL: "side-bar-fill",
   CHECK: "check-fill",
   CHECK_CIRCLE: "checkbox-circle-fill",
@@ -1030,7 +1219,8 @@ var IconNames = {
   HAMMER: "hammer-fill",
   ROCKET: "rocket-fill",
   TICKET: "coupon-2-fill",
-  CLIPBOARD: "clipboard-fill"
+  CLIPBOARD: "clipboard-fill",
+  QUESTION_CIRCLE: "question-circle-line"
 };
 var iconFiles = {
   "mic-fill": "Icon-mic-fill.svg",
@@ -1048,6 +1238,7 @@ var iconFiles = {
   "flow-chart": "Icon-flow-chart.svg",
   "logout-circle-r-fill": "Icon-logout-circle-r-fill.svg",
   "logout-circle-r-line": "Icon-logout-circle-r-line.svg",
+  "question-line": "Icon-question-line.svg",
   "side-bar-fill": "Icon-side-bar-fill.svg",
   "check-fill": "Icon-check-fill.svg",
   "checkbox-circle-fill": "Icon-checkbox-circle-fill.svg",
@@ -1056,7 +1247,8 @@ var iconFiles = {
   "hammer-fill": "Icon-hammer-fill.svg",
   "rocket-fill": "Icon-rocket-fill.svg",
   "coupon-2-fill": "Icon-coupon-2-fill.svg",
-  "clipboard-fill": "Icon-clipboard-fill.svg"
+  "clipboard-fill": "Icon-clipboard-fill.svg",
+  "question-circle-line": "Icon-question-circle-line.svg"
 };
 function getIconPath(name) {
   return `${ICON_BASE_PATH}/${iconFiles[name]}`;
@@ -1072,7 +1264,7 @@ function Icon({
   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 Container2 = styled48.nav`
+var Container2 = styled50.nav`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1092,7 +1284,7 @@ var Container2 = styled48.nav`
     background-color: ${tokens.colors.background.darkest};
   }
 `;
-var ContentWrapper = styled48.div`
+var ContentWrapper = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1110,7 +1302,7 @@ var ContentWrapper = styled48.div`
     padding: 0 ${tokens.spacing.xs} 0 6px;
   }
 `;
-var UserStatusSlot = styled48.div`
+var UserStatusSlot = styled50.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
@@ -1123,7 +1315,7 @@ var UserStatusSlot = styled48.div`
     white-space: nowrap;
   }
 `;
-var ActionButtonsSlot = styled48.div`
+var ActionButtonsSlot = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1146,7 +1338,7 @@ function NavHorizontal({
   ] }) });
 }
 NavHorizontal.displayName = "NavHorizontal";
-var Container3 = styled48.nav`
+var Container3 = styled50.nav`
   position: absolute;
   top: 0;
   left: 0;
@@ -1156,17 +1348,10 @@ var Container3 = styled48.nav`
   display: flex;
   flex-direction: column;
   z-index: ${tokens.zIndex.base + 9}; /* Below horizontal nav and chat sidebar */
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none; /* Firefox */
+  overflow: hidden;
   /* Use CSS custom property for coordinated animations with MainPane */
   transition: transform var(--layout-transition-duration, 0.3s) var(--layout-transition-easing, ease-out);
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
   /* Dark theme support */
   @media (prefers-color-scheme: dark) {
     background-color: ${tokens.colors.background.darkest};
@@ -1177,31 +1362,12 @@ var Container3 = styled48.nav`
     width: 60px; /* Match MainPane left offset on mobile */
   }
-  /* Mobile landscape: allow content to overflow and scroll with thin scrollbar */
+  /* Mobile landscape */
   @media (orientation: landscape) and (max-height: 500px) {
     width: 60px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin; /* Firefox - show thin scrollbar */
-    /* Show thin scrollbar for Chrome, Safari */
-    &::-webkit-scrollbar {
-      display: block;
-      width: 3px;
-      height: 3px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${tokens.colors.border.default};
-      border-radius: 2px;
-    }
   }
 `;
-var TopSection = styled48.div`
+var TopSection = styled50.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1214,7 +1380,7 @@ var TopSection = styled48.div`
     height: 64px; /* Same as PaneSectionHeader on desktop */
   }
 `;
-var BackButton = styled48.button`
+var BackButton = styled50.button`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1250,12 +1416,12 @@ var BackButton = styled48.button`
     outline-offset: 2px;
   }
 `;
-styled48.span`
+styled50.span`
   font-size: ${tokens.typography.fontSize.xl};
   line-height: ${tokens.typography.lineHeight.tight};
   font-weight: ${tokens.typography.fontWeight.bold};
 `;
-var Separator = styled48.div`
+var Separator = styled50.div`
   width: 32px;
   height: 2px;
   background-color: ${tokens.colors.background.light};
@@ -1263,14 +1429,15 @@ var Separator = styled48.div`
   margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
   border-radius: 1px;
 `;
-var FolderGroupsSlot = styled48.div`
+var FolderGroupsSlot = styled50.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
-  flex: 1;
-  padding-bottom: 120px; /* Prevent overlap with bottom section (2 buttons @ 40px + 1 gap @ 8px + padding @ 32px) */
+  flex: 1 1 0%; /* Take remaining space but shrink aggressively */
+  min-height: 80px; /* At least show one category icon */
+  overflow: hidden; /* Let NavigationContainer inside handle its own scroll */
   /* Server/workspace icons styling */
   > * {
@@ -1287,40 +1454,38 @@ var FolderGroupsSlot = styled48.div`
   /* Responsive adjustments */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    padding: 0 6px ${tokens.spacing.md} 96px; /* Reduce horizontal padding on mobile */
-  }
-  /* Mobile landscape: remove extra padding since BottomSection flows with content */
-  @media (orientation: landscape) and (max-height: 500px) {
-    padding-bottom: ${tokens.spacing.md};
-    flex: 0 0 auto; /* Don't flex-grow, allow natural height */
+    padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
   }
 `;
-var BottomSection = styled48.div`
-  position: absolute;
-  bottom: 0; /* At the bottom of the nav container */
-  left: 0;
-  right: 0;
+var BottomSection = styled50.div`
+  flex: 0 1 auto; /* Natural size, can shrink when no space */
+  min-height: 48px; /* At least one button visible */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md} 0;
-  background-color: ${tokens.colors.background.darker};
+  overflow-y: auto;
+  overflow-x: hidden;
-  @media (prefers-color-scheme: dark) {
-    background-color: ${tokens.colors.background.darkest};
+  /* Match NavigationContainer scroll styling */
+  &::-webkit-scrollbar {
+    width: 3px;
   }
-  /* Mobile landscape: make bottom section flow with content instead of fixed */
-  @media (orientation: landscape) and (max-height: 500px) {
-    position: relative;
-    bottom: auto;
-    margin-top: auto; /* Push to bottom of flex container */
-    flex-shrink: 0;
+  &::-webkit-scrollbar-track {
+    background: transparent;
   }
+  &::-webkit-scrollbar-thumb {
+    background: ${tokens.colors.border.default};
+    border-radius: 2px;
+  }
+  scrollbar-width: thin;
+  scrollbar-color: ${tokens.colors.border.default} transparent;
 `;
-var BottomButton = styled48.button`
+var BottomButton = styled50.button`
   width: 40px;
   height: 40px;
   border-radius: ${tokens.borderRadius.full};
@@ -1356,6 +1521,7 @@ var BottomButton = styled48.button`
 function NavVertical({
   onBackClick,
   onHomeClick,
+  onHelpClick,
   onSettingsClick,
   onLogoutClick,
   folderGroupsSlot,
@@ -1364,6 +1530,7 @@ function NavVertical({
 }) {
   const backButtonRef = useRef(null);
   const homeButtonRef = useRef(null);
+  const helpButtonRef = useRef(null);
   const settingsButtonRef = useRef(null);
   const logoutButtonRef = useRef(null);
   const { buttonProps: backButtonProps } = useButton(
@@ -1380,6 +1547,13 @@ function NavVertical({
     },
     homeButtonRef
   );
+  const { buttonProps: helpButtonProps } = useButton(
+    {
+      onPress: onHelpClick,
+      "aria-label": "Help"
+    },
+    helpButtonRef
+  );
   const { buttonProps: settingsButtonProps } = useButton(
     {
       onPress: onSettingsClick,
@@ -1394,18 +1568,20 @@ function NavVertical({
     },
     logoutButtonRef
   );
+  const hasBottomButtons = onHelpClick || onSettingsClick || onLogoutClick;
   return /* @__PURE__ */ jsxs(Container3, { className, role: "navigation", "aria-label": ariaLabel, children: [
     /* @__PURE__ */ jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "side-bar-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "side-bar-fill", size: 24, color: "white" }) }) : null }),
     /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(FolderGroupsSlot, { children: folderGroupsSlot }),
-    (onSettingsClick || onLogoutClick) && /* @__PURE__ */ jsxs(BottomSection, { children: [
+    hasBottomButtons && /* @__PURE__ */ jsxs(BottomSection, { children: [
+      onHelpClick && /* @__PURE__ */ jsx(BottomButton, { ...helpButtonProps, ref: helpButtonRef, "data-tour-help-button": true, children: /* @__PURE__ */ jsx(Icon, { name: "question-circle-line", size: 24, color: "white" }) }),
       onSettingsClick && /* @__PURE__ */ jsx(BottomButton, { ...settingsButtonProps, ref: settingsButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "settings-3-line", size: 24, color: "white" }) }),
       onLogoutClick && /* @__PURE__ */ jsx(BottomButton, { ...logoutButtonProps, ref: logoutButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "logout-circle-r-line", size: 24, color: "white" }) })
     ] })
   ] });
 }
 NavVertical.displayName = "NavVertical";
-var Container4 = styled48.div`
+var Container4 = styled50.div`
   position: relative;
   width: 100%;
   height: 100vh;
@@ -1418,7 +1594,7 @@ var Container4 = styled48.div`
     position: relative;
   }
 `;
-var BackgroundPane = styled48.div`
+var BackgroundPane = styled50.div`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -1459,7 +1635,7 @@ var BackgroundPane = styled48.div`
     left: 60px; /* Smaller nav on mobile */
   }
 `;
-var MainPane = styled48.main`
+var MainPane = styled50.main`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -1508,6 +1684,7 @@ function Layout({
   navHorizontalActionsSlot,
   onNavBackClick,
   onNavHomeClick,
+  onNavHelpClick,
   onNavSettingsClick,
   onNavLogoutClick,
   className
@@ -1519,6 +1696,7 @@ function Layout({
         folderGroupsSlot: navVerticalSlot,
         onBackClick: onNavBackClick,
         onHomeClick: onNavHomeClick,
+        onHelpClick: onNavHelpClick,
         onSettingsClick: onNavSettingsClick,
         onLogoutClick: onNavLogoutClick
       }
@@ -1535,13 +1713,13 @@ function Layout({
   ] });
 }
 Layout.displayName = "Layout";
-var Container5 = styled48.div`
+var Container5 = styled50.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: ${tokens.spacing.xs};
 `;
-var ActionButton = styled48.button`
+var ActionButton = styled50.button`
   width: ${({ $size = 32 }) => $size}px;
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
@@ -1646,7 +1824,7 @@ var statusColors = {
   busy: tokens.colors.status.busy,
   offline: tokens.colors.status.offline
 };
-var Container6 = styled48.button`
+var Container6 = styled50.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -1685,7 +1863,7 @@ var Container6 = styled48.button`
     opacity: 0.9;
   }
 `;
-var IconWrapper2 = styled48.div`
+var IconWrapper2 = styled50.div`
   position: relative;
   width: 36px;
   height: 36px;
@@ -1696,13 +1874,13 @@ var IconWrapper2 = styled48.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-var WorkflowInfo = styled48.div`
+var WorkflowInfo = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   min-width: 0;
 `;
-var WorkflowName = styled48.span`
+var WorkflowName = styled50.span`
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -1711,14 +1889,14 @@ var WorkflowName = styled48.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var WorkflowStatus = styled48.span`
+var WorkflowStatus = styled50.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
   line-height: ${tokens.typography.lineHeight.tight};
   text-transform: capitalize;
 `;
-var WorkflowSubtitle = styled48.span`
+var WorkflowSubtitle = styled50.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -1728,7 +1906,7 @@ var WorkflowSubtitle = styled48.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var StatusIndicatorOuter = styled48.span`
+var StatusIndicatorOuter = styled50.span`
   position: absolute;
   bottom: -2px;
   right: -2px;
@@ -1740,7 +1918,7 @@ var StatusIndicatorOuter = styled48.span`
   align-items: center;
   justify-content: center;
 `;
-var StatusIndicatorInner = styled48.span`
+var StatusIndicatorInner = styled50.span`
   width: 8px;
   height: 8px;
   border-radius: ${tokens.borderRadius.full};
@@ -1786,7 +1964,7 @@ function WorkflowStatusCard({
   ] });
 }
 WorkflowStatusCard.displayName = "WorkflowStatusCard";
-var DarkNotificationCardContainer = styled48.div`
+var DarkNotificationCardContainer = styled50.div`
   display: flex;
   flex-direction: column;
   padding: ${tokens.spacing.xs};
@@ -1797,7 +1975,7 @@ var DarkNotificationCardContainer = styled48.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkSectionHeader = styled48.button`
+var DarkSectionHeader = styled50.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1823,7 +2001,7 @@ var DarkSectionHeader = styled48.button`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var DarkChevronIcon = styled48.span`
+var DarkChevronIcon = styled50.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1841,7 +2019,7 @@ var DarkChevronIcon = styled48.span`
     height: 12px;
   }
 `;
-var DarkSectionContent = styled48.div`
+var DarkSectionContent = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -1850,7 +2028,7 @@ var DarkSectionContent = styled48.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkNotificationItemWrapper = styled48.button`
+var DarkNotificationItemWrapper = styled50.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1889,7 +2067,7 @@ var DarkNotificationItemWrapper = styled48.button`
     opacity: 0.5;
   }
 `;
-var DarkItemIcon = styled48.span`
+var DarkItemIcon = styled50.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1914,7 +2092,7 @@ var DarkItemIcon = styled48.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var DarkItemText = styled48.span`
+var DarkItemText = styled50.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
@@ -1926,7 +2104,7 @@ var DarkItemText = styled48.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var DarkMenuButton = styled48.button`
+var DarkMenuButton = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1960,7 +2138,7 @@ var DarkMenuButton = styled48.button`
     height: 14px;
   }
 `;
-var DarkTimestamp = styled48.span`
+var DarkTimestamp = styled50.span`
   font-size: 10px;
   color: ${tokens.colors.text.tertiary};
   white-space: normal;
@@ -2145,7 +2323,7 @@ var DarkNotificationItemComponent = ({
   );
 };
 DarkNotificationCard.displayName = "DarkNotificationCard";
-var Container7 = styled48.div`
+var Container7 = styled50.div`
   width: 100%;
   height: 100%;
   background-color: transparent;
@@ -2155,7 +2333,7 @@ var Container7 = styled48.div`
   font-family: ${tokens.typography.fontFamily.primary};
   overflow: hidden; // Prevent content from escaping container bounds
 `;
-var TabListWrapper = styled48.div`
+var TabListWrapper = styled50.div`
   display: flex;
   border-bottom: 2px solid ${tokens.colors.border.default};
   background-color: ${tokens.colors.surface.subtle};
@@ -2175,7 +2353,7 @@ var TabListWrapper = styled48.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var TabButton = styled48.button`
+var TabButton = styled50.button`
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   background: none;
   border: none;
@@ -2219,7 +2397,7 @@ var TabButton = styled48.button`
     }
   `}
 `;
-var TabPanelWrapper = styled48.div`
+var TabPanelWrapper = styled50.div`
   flex: 1;
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
@@ -2257,7 +2435,7 @@ var TabPanelWrapper = styled48.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var RunsContainer = styled48.div`
+var RunsContainer = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.lg};
@@ -2270,7 +2448,7 @@ var RunsContainer = styled48.div`
     gap: ${tokens.spacing.md};
   }
 `;
-styled48.button`
+styled50.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -2307,7 +2485,7 @@ styled48.button`
     outline-offset: 2px;
   }
 `;
-var StyledDisclosureGroup = styled48(DisclosureGroup)`
+var StyledDisclosureGroup = styled50(DisclosureGroup)`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -2316,7 +2494,7 @@ var StyledDisclosureGroup = styled48(DisclosureGroup)`
   min-width: 0;
   overflow: hidden;
 `;
-var CategoryDisclosure = styled48(Disclosure)`
+var CategoryDisclosure = styled50(Disclosure)`
   background-color: transparent;
   display: flex;
   flex-direction: column;
@@ -2334,7 +2512,7 @@ var CategoryDisclosure = styled48(Disclosure)`
     cursor: not-allowed;
   }
 `;
-var CategoryHeader = styled48(Button)`
+var CategoryHeader = styled50(Button)`
   width: 100%;
   padding: ${tokens.spacing.xs} 0;
   background: none;
@@ -2364,7 +2542,7 @@ var CategoryHeader = styled48(Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var CategoryTitle = styled48.div`
+var CategoryTitle = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -2373,7 +2551,7 @@ var CategoryTitle = styled48.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-styled48.img`
+styled50.img`
   width: 16px;
   height: 16px;
   opacity: 0.6;
@@ -2384,7 +2562,7 @@ styled48.img`
     height: 14px;
   }
 `;
-var HashtagIcon = styled48.img`
+var HashtagIcon = styled50.img`
   width: 14px;
   height: 14px;
   opacity: 0.6;
@@ -2395,7 +2573,7 @@ var HashtagIcon = styled48.img`
     height: 12px;
   }
 `;
-var ChevronIcon = styled48.div`
+var ChevronIcon = styled50.div`
   display: flex;
   align-items: center;
   transition: transform ${tokens.transitions.normal};
@@ -2416,7 +2594,7 @@ var ChevronIcon = styled48.div`
     }
   }
 `;
-var CategoryDisclosurePanel = styled48(DisclosurePanel)`
+var CategoryDisclosurePanel = styled50(DisclosurePanel)`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -2445,7 +2623,7 @@ var CategoryDisclosurePanel = styled48(DisclosurePanel)`
     }
   }
 `;
-var ItemContainer = styled48.div`
+var ItemContainer = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -2465,7 +2643,7 @@ var ItemContainer = styled48.div`
     background-color: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ItemDisclosure = styled48(Disclosure)`
+var ItemDisclosure = styled50(Disclosure)`
   background-color: transparent;
   margin-bottom: ${tokens.spacing.xs};
   display: flex;
@@ -2480,7 +2658,7 @@ var ItemDisclosure = styled48(Disclosure)`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ItemHeader = styled48(Button)`
+var ItemHeader = styled50(Button)`
   width: 100%;
   padding: 0;
   background: none;
@@ -2498,7 +2676,7 @@ var ItemHeader = styled48(Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var ItemDisclosurePanel = styled48(DisclosurePanel)`
+var ItemDisclosurePanel = styled50(DisclosurePanel)`
   padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
@@ -2528,7 +2706,7 @@ var ItemDisclosurePanel = styled48(DisclosurePanel)`
     }
   }
 `;
-var ItemIcon = styled48.img`
+var ItemIcon = styled50.img`
   width: 20px;
   height: 20px;
   opacity: 0.6;
@@ -2539,7 +2717,7 @@ var ItemIcon = styled48.img`
     height: 18px;
   }
 `;
-var ItemName = styled48.span`
+var ItemName = styled50.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
@@ -2557,7 +2735,7 @@ var ItemName = styled48.span`
     color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
   }
 `;
-var RunStatus = styled48.span`
+var RunStatus = styled50.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2589,13 +2767,13 @@ var RunStatus = styled48.span`
     font-size: ${tokens.typography.fontSize.xs};
   }
 `;
-styled48.div`
+styled50.div`
   margin-bottom: ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   background-color: ${tokens.colors.surface.overlay};
   overflow: hidden;
 `;
-styled48.button`
+styled50.button`
   width: 100%;
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.surface.overlay};
@@ -2631,13 +2809,13 @@ styled48.button`
     margin-bottom: ${tokens.spacing.xs};
   }
 `;
-styled48.span`
+styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
   transition: transform ${tokens.transitions.normal};
   transform: ${(props) => props.$isExpanded ? "rotate(180deg)" : "rotate(0deg)"};
 `;
-styled48.div`
+styled50.div`
   padding: ${tokens.spacing.md};
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
@@ -2657,17 +2835,17 @@ styled48.div`
     }
   }
 `;
-var MeterContainer = styled48.div`
+var MeterContainer = styled50.div`
   max-width: 600px;
   margin: 0 auto;
 `;
-var MeterLabel = styled48.div`
+var MeterLabel = styled50.div`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
   margin-bottom: ${tokens.spacing.md};
   color: ${tokens.colors.text.primary};
 `;
-var MeterBar = styled48.div`
+var MeterBar = styled50.div`
   width: 100%;
   height: 24px;
   background-color: ${tokens.colors.background.darker};
@@ -2676,7 +2854,7 @@ var MeterBar = styled48.div`
   position: relative;
   margin-bottom: ${tokens.spacing.md};
 `;
-var MeterFill = styled48.div`
+var MeterFill = styled50.div`
   height: 100%;
   width: ${(props) => props.$percentage}%;
   background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
@@ -2704,7 +2882,7 @@ var MeterFill = styled48.div`
     }
   }
 `;
-var MeterStats = styled48.div`
+var MeterStats = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   text-align: center;
@@ -2715,18 +2893,18 @@ var MeterStats = styled48.div`
     opacity: 0.8;
   }
 `;
-var ConnectionsContainer = styled48.div`
+var ConnectionsContainer = styled50.div`
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 `;
-var ConnectionDescription = styled48.p`
+var ConnectionDescription = styled50.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.relaxed};
   margin-bottom: ${tokens.spacing.lg};
 `;
-var GoogleButton = styled48.button`
+var GoogleButton = styled50.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   font-size: ${tokens.typography.fontSize.sm};
@@ -3180,7 +3358,7 @@ function PaneMenus({
     /* @__PURE__ */ jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var Container8 = styled48.header`
+var Container8 = styled50.header`
   position: relative;
   width: 100%;
   height: 56px;
@@ -3243,7 +3421,7 @@ var Container8 = styled48.header`
     background-color: ${tokens.colors.backdrop};
   }
 `;
-var BrandLogo = styled48.img`
+var BrandLogo = styled50.img`
   position: relative;
   z-index: 1;
   max-height: 28px;
@@ -3258,7 +3436,7 @@ var BrandLogo = styled48.img`
     max-height: 32px;
   }
 `;
-var SettingsButton = styled48.button`
+var SettingsButton = styled50.button`
   position: absolute;
   top: 50%;
   right: ${tokens.spacing.md};
@@ -3312,7 +3490,7 @@ var SettingsButton = styled48.button`
     right: ${tokens.spacing.lg};
   }
 `;
-var BackButton2 = styled48.button`
+var BackButton2 = styled50.button`
   position: absolute;
   top: 50%;
   left: ${tokens.spacing.md};
@@ -3419,7 +3597,7 @@ function PaneSectionHeader({
   ] });
 }
 PaneSectionHeader.displayName = "PaneSectionHeader";
-var Container9 = styled48.button`
+var Container9 = styled50.button`
   /* Base button styling */
   width: 48px;
   height: 48px;
@@ -3468,7 +3646,7 @@ var Container9 = styled48.button`
     cursor: not-allowed;
   }
 `;
-var LogoImage = styled48.img`
+var LogoImage = styled50.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -3487,7 +3665,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
   return /* @__PURE__ */ jsx(Container9, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
 }
 ServiceIcon.displayName = "ServiceIcon";
-var NotificationCardContainer = styled48.div`
+var NotificationCardContainer = styled50.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3498,7 +3676,7 @@ var NotificationCardContainer = styled48.div`
   box-shadow: ${tokens.shadows.card};
   gap: ${tokens.spacing.md};
 `;
-var SectionHeader = styled48.button`
+var SectionHeader = styled50.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3524,7 +3702,7 @@ var SectionHeader = styled48.button`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ChevronIcon2 = styled48.span`
+var ChevronIcon2 = styled50.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3542,14 +3720,14 @@ var ChevronIcon2 = styled48.span`
     height: 16px;
   }
 `;
-var SectionContent = styled48.div`
+var SectionContent = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding-left: 0;
   margin-top: ${tokens.spacing.xs};
 `;
-var NotificationItemWrapper = styled48.button`
+var NotificationItemWrapper = styled50.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -3586,7 +3764,7 @@ var NotificationItemWrapper = styled48.button`
     opacity: 0.5;
   }
 `;
-var ItemIcon2 = styled48.span`
+var ItemIcon2 = styled50.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3611,7 +3789,7 @@ var ItemIcon2 = styled48.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var ItemText = styled48.span`
+var ItemText = styled50.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 15px;
@@ -3620,7 +3798,7 @@ var ItemText = styled48.span`
   line-height: ${tokens.typography.lineHeight.normal};
   word-wrap: break-word;
 `;
-var MenuButton = styled48.button`
+var MenuButton = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3830,7 +4008,7 @@ var NotificationItemComponent = ({
   );
 };
 NotificationCard.displayName = "NotificationCard";
-var StyledUserMessage = styled48.button`
+var StyledUserMessage = styled50.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -4170,7 +4348,7 @@ var ConnectionStatusBadge = ({
   );
 };
 ConnectionStatusBadge.displayName = "ConnectionStatusBadge";
-var Badge = styled48.span`
+var Badge = styled50.span`
   display: inline-flex;
   align-items: center;
   padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} 6px` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
@@ -4206,7 +4384,7 @@ var IntegrationCard = ({
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
-var Card = styled48.div`
+var Card = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -4226,11 +4404,11 @@ var Card = styled48.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var StatusRow = styled48.div`
+var StatusRow = styled50.div`
   display: flex;
   align-items: center;
 `;
-var ContentHeader = styled48.div`
+var ContentHeader = styled50.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -4239,7 +4417,7 @@ var ContentHeader = styled48.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var IconWrapper3 = styled48.div`
+var IconWrapper3 = styled50.div`
   width: 40px;
   height: 40px;
   display: flex;
@@ -4249,32 +4427,32 @@ var IconWrapper3 = styled48.div`
   background: ${tokens.colors.background.light};
   flex-shrink: 0;
 `;
-var IconImage = styled48.img`
+var IconImage = styled50.img`
   width: 24px;
   height: 24px;
   object-fit: contain;
 `;
-var Info = styled48.div`
+var Info = styled50.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   flex: 1;
 `;
-var Name = styled48.h3`
+var Name = styled50.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var Description = styled48.p`
+var Description = styled50.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ActionsRow = styled48.div`
+var ActionsRow = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -4332,14 +4510,14 @@ var SecretInput = ({
   ] });
 };
 SecretInput.displayName = "SecretInput";
-var Container10 = styled48.div`
+var Container10 = styled50.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   min-width: 0;
 `;
-var Input = styled48.input`
+var Input = styled50.input`
   width: 100%;
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   padding-right: 40px;
@@ -4365,7 +4543,7 @@ var Input = styled48.input`
     cursor: not-allowed;
   }
 `;
-var VisibilityToggle = styled48.button`
+var VisibilityToggle = styled50.button`
   position: absolute;
   right: ${tokens.spacing.sm};
   top: 50%;
@@ -4501,7 +4679,7 @@ function parseInlineMarkdown(text, startKey) {
   }
   return { elements, nextKey: key };
 }
-var Container11 = styled48.div`
+var Container11 = styled50.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
@@ -4566,7 +4744,7 @@ var Container11 = styled48.div`
   h3 { font-size: 1.05em; font-weight: ${tokens.typography.fontWeight.semibold}; }
   h4 { font-size: 1em; font-weight: ${tokens.typography.fontWeight.semibold}; }
 `;
-var Cursor = styled48.span`
+var Cursor = styled50.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -4622,7 +4800,7 @@ var StreamingTextBase = ({
 };
 var StreamingText = memo(StreamingTextBase);
 StreamingText.displayName = "StreamingText";
-var MessageContainer = styled48.div`
+var MessageContainer = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -4632,20 +4810,20 @@ var MessageContainer = styled48.div`
   will-change: contents;
   contain: content;
 `;
-var AvatarContainer = styled48.div`
+var AvatarContainer = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled48.img`
+var Avatar2 = styled50.img`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled48.div`
+var AvatarInitials = styled50.div`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
@@ -4663,16 +4841,16 @@ var AvatarInitials = styled48.div`
     object-fit: contain;
   }
 `;
-var AvatarLabel = styled48.span`
+var AvatarLabel = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
 `;
-var ContentContainer = styled48.div`
+var ContentContainer = styled50.div`
   width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled48.div`
+var MessageContent = styled50.div`
   /* Use solid color instead of backdrop-filter for performance during streaming */
   background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm};
@@ -4686,7 +4864,7 @@ var MessageContent = styled48.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots2 = styled48.div`
+var LoadingDots2 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
@@ -4703,7 +4881,7 @@ var pulse2 = keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled48.div`
+var LoadingDot = styled50.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -4712,7 +4890,7 @@ var LoadingDot = styled48.div`
   animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled48.div`
+var FileAttachmentContainer = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -4748,7 +4926,7 @@ var FileAttachmentContainer = styled48.div`
     }
   `}
 `;
-var FileIconContainer = styled48.div`
+var FileIconContainer = styled50.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -4758,14 +4936,14 @@ var FileIconContainer = styled48.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled48.div`
+var FileInfo = styled50.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled48.div`
+var FileTitle = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -4775,7 +4953,7 @@ var FileTitle = styled48.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled48.div`
+var FileMetadata = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -4785,7 +4963,7 @@ var FileMetadata = styled48.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled48.span`
+var FileSubtitle = styled50.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -4841,13 +5019,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled48.div`
+var AttachmentsContainer = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton2 = styled48.button`
+var ActionButton2 = styled50.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -4871,19 +5049,19 @@ var ActionButton2 = styled48.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer = styled48.div`
+var ActionsContainer = styled50.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled48.time`
+var MessageTime = styled50.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled48.span`
+var StreamingIndicator = styled50.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -4976,13 +5154,14 @@ function stripToolCallMarkers(content) {
   stripped = stripped.replace(/__TOOL_CALL__:[^:]+:\{[^}]*(?:\{[^}]*\}[^}]*)*\}/g, "");
   stripped = stripped.replace(/<!--TOOL_CALL:[\s\S]*$/g, "");
   stripped = stripped.replace(/__TOOL_CALL__:[\s\S]*$/g, "");
+  stripped = stripped.replace(/[",]*\s*"[a-z_]+":\s*"[^"]*"\s*\}["]?/gi, "");
   return stripped.trim();
 }
-var GenerativeUIContainer = styled48.div`
+var GenerativeUIContainer = styled50.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-styled48.div`
+styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -4994,12 +5173,12 @@ styled48.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
 `;
-styled48.span`
+styled50.span`
   display: flex;
   align-items: center;
   color: ${tokens.colors.primary};
 `;
-styled48.span`
+styled50.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
@@ -5140,7 +5319,7 @@ var sizeStyles = {
     height: 44px;
   `
 };
-var StyledButton = styled48.button`
+var StyledButton = styled50.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -5223,7 +5402,7 @@ function Button2({
   );
 }
 Button2.displayName = "Button";
-var ActionsContainer2 = styled48.div`
+var ActionsContainer2 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
@@ -5283,7 +5462,7 @@ var blink = keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled48.div`
+var ResponseContainer = styled50.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -5295,13 +5474,13 @@ var ResponseContainer = styled48.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots3 = styled48.div`
+var LoadingDots3 = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled48.span`
+var Dot2 = styled50.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -5309,7 +5488,7 @@ var Dot2 = styled48.span`
   animation: ${dotPulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled48.div`
+var TypingIndicator = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5322,14 +5501,14 @@ var TypingIndicator = styled48.div`
     animation: ${dotPulse2} 1.4s ease-in-out infinite;
   }
 `;
-var Message2 = styled48.span`
+var Message2 = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.primary};
   font-weight: ${tokens.typography.fontWeight.regular};
   line-height: ${tokens.typography.lineHeight.normal};
   white-space: nowrap;
 `;
-var StreamingText2 = styled48.div`
+var StreamingText2 = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -5401,7 +5580,7 @@ var shake = keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled48.div`
+var AgentStateContainer = styled50.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -5415,35 +5594,35 @@ var AgentStateContainer = styled48.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled48.div`
+var StateContent = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled48.div`
+var IdleIndicator = styled50.div`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.status.idle};
   border-radius: ${tokens.borderRadius.full};
   animation: ${dotPulse3} 2s infinite ease-in-out;
 `;
-var ErrorIndicator = styled48.div`
+var ErrorIndicator = styled50.div`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.error};
   border-radius: ${tokens.borderRadius.full};
   animation: ${shake} 0.5s ease-in-out;
 `;
-var StateLabel = styled48.span`
+var StateLabel = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.regular};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.normal};
   white-space: nowrap;
 `;
-styled48.p`
+styled50.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -5451,7 +5630,7 @@ styled48.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled48.div`
+var ProgressBar = styled50.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -5459,7 +5638,7 @@ var ProgressBar = styled48.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill = styled48.div`
+var ProgressBarFill = styled50.div`
   height: 100%;
   width: ${(props) => Math.min(Math.max(props.progress, 0), 100)}%;
   background: linear-gradient(135deg, ${tokens.colors.accent} 0%, ${tokens.colors.primary} 100%);
@@ -5488,7 +5667,7 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var FooterContainer = styled48.footer`
+var FooterContainer = styled50.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5497,7 +5676,7 @@ var FooterContainer = styled48.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled48.div`
+var FooterContent = styled50.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5510,13 +5689,13 @@ var FooterContent = styled48.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled48.div`
+var FooterBranding = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled48.div`
+var FooterStatus = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5526,7 +5705,7 @@ var FooterStatus = styled48.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled48.a`
+var FooterLink = styled50.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -5584,7 +5763,7 @@ var pulse3 = keyframes`
     transform: scale(1.1);
   }
 `;
-var Container12 = styled48.div`
+var Container12 = styled50.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -5600,7 +5779,7 @@ var Container12 = styled48.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled48.div`
+var StatusDot = styled50.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -5661,7 +5840,7 @@ var StatusDot = styled48.div`
   animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled48.span`
+var Label = styled50.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -5688,7 +5867,7 @@ var Label = styled48.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled48.div`
+var BadgeContainer = styled50.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -5765,7 +5944,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsx(Container12, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled48.header`
+var HeaderContainer = styled50.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5781,14 +5960,14 @@ var HeaderContainer = styled48.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled48.div`
+var HeaderContent = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled48.h1`
+var HeaderTitle = styled50.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -5799,7 +5978,7 @@ var HeaderTitle = styled48.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled48.p`
+var HeaderSubtitle = styled50.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -5809,13 +5988,13 @@ var HeaderSubtitle = styled48.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled48.div`
+var HeaderActions = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton3 = styled48.button`
+var ActionButton3 = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5932,13 +6111,13 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var InputContainer = styled48.div`
+var InputContainer = styled50.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper2 = styled48.div`
+var InputWrapper2 = styled50.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -5958,7 +6137,7 @@ var InputWrapper2 = styled48.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled48.textarea`
+var TextArea = styled50.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -6004,7 +6183,7 @@ var TextArea = styled48.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled48.button`
+var SendButton = styled50.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -6134,7 +6313,7 @@ var Input2 = ({
     )
   ] }) });
 };
-var MessagesContainer = styled48.div`
+var MessagesContainer = styled50.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -6163,7 +6342,7 @@ var Messages = ({
   return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var MessagesListContainer = styled48.div`
+var MessagesListContainer = styled50.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -6203,7 +6382,7 @@ var MessagesListContainer = styled48.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled48.div`
+var MessagesListContent = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -6319,7 +6498,7 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled48.div`
+var StyledUserMessage2 = styled50.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -6327,7 +6506,7 @@ var StyledUserMessage2 = styled48.div`
   padding: 0;
   width: 100%;
 `;
-var MessageBubble = styled48.div`
+var MessageBubble = styled50.div`
   display: flex;
   flex-direction: column;
   max-width: 85%;
@@ -6354,7 +6533,7 @@ var MessageBubble = styled48.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled48.p`
+var MessageContent2 = styled50.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -6363,13 +6542,13 @@ var MessageContent2 = styled48.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled48.time`
+var MessageTime2 = styled50.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton4 = styled48.button`
+var ActionButton4 = styled50.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6393,12 +6572,12 @@ var ActionButton4 = styled48.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled48.div`
+var ActionsContainer3 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var Avatar3 = styled48.img`
+var Avatar3 = styled50.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -6437,7 +6616,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled48.div`
+var ErrorContainer = styled50.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -6451,7 +6630,7 @@ var ErrorContainer = styled48.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled48.div`
+var IconContainer = styled50.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -6468,29 +6647,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
   }
 );
-var Content2 = styled48.div`
+var Content2 = styled50.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage = styled48.div`
+var ErrorMessage = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled48.div`
+var ErrorDetails = styled50.div`
   font-size: ${tokens.typography.fontSize.xs};
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Actions2 = styled48.div`
+var Actions2 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button3 = styled48.button`
+var Button3 = styled50.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6519,7 +6698,7 @@ var Button3 = styled48.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled48.button`
+var CloseButton = styled50.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -6578,7 +6757,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled48.div`
+var SuggestionsContainer = styled50.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -6611,7 +6790,7 @@ var SuggestionsContainer = styled48.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled48.button`
+var StyledSuggestion = styled50.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -6684,7 +6863,7 @@ function SuggestionChip({ suggestion, onSelect }) {
   return /* @__PURE__ */ jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
 }
 Suggestions.displayName = "Suggestions";
-var WindowContainer = styled48.div`
+var WindowContainer = styled50.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -6863,7 +7042,7 @@ function FacebookIcon({
   ) });
 }
 FacebookIcon.displayName = "FacebookIcon";
-var StyledIconWrapper = styled48.button`
+var StyledIconWrapper = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7133,7 +7312,7 @@ function InstagramIcon({
   ] });
 }
 InstagramIcon.displayName = "InstagramIcon";
-var StyledIconWrapper2 = styled48.button`
+var StyledIconWrapper2 = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7269,7 +7448,7 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
-var StyledIconWrapper3 = styled48.button`
+var StyledIconWrapper3 = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7906,7 +8085,7 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
-var StyledXIcon = styled48.svg`
+var StyledXIcon = styled50.svg`
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
@@ -8322,7 +8501,7 @@ var PostApprovalControls = ({
   ] });
 };
 PostApprovalControls.displayName = "PostApprovalControls";
-var Container13 = styled48.div`
+var Container13 = styled50.div`
   display: grid;
   gap: 0;
   background: ${tokens.colors.background.dark};
@@ -8332,7 +8511,7 @@ var Container13 = styled48.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header2 = styled48.div`
+var Header2 = styled50.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -8346,7 +8525,7 @@ var Header2 = styled48.div`
     background: ${tokens.colors.background.light};
   }
 `;
-var StatusBadge = styled48.span`
+var StatusBadge = styled50.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -8357,23 +8536,23 @@ var StatusBadge = styled48.span`
   color: ${({ $color }) => $color};
   white-space: nowrap;
 `;
-var MetaInfo = styled48.div`
+var MetaInfo = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   min-width: 0;
 `;
-var PostId = styled48.span`
+var PostId = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   font-family: ${tokens.typography.fontFamily.monospace};
 `;
-var ErrorText = styled48.span`
+var ErrorText = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CollapseIcon = styled48.span`
+var CollapseIcon = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.medium};
@@ -8383,17 +8562,17 @@ var CollapseIcon = styled48.span`
   align-items: center;
   justify-content: center;
 `;
-var Content3 = styled48.div`
+var Content3 = styled50.div`
   display: grid;
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.default};
 `;
-var EditSection = styled48.div`
+var EditSection = styled50.div`
   display: grid;
   gap: ${tokens.spacing.xs};
 `;
-var EditLabel = styled48.label`
+var EditLabel = styled50.label`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -8402,7 +8581,7 @@ var EditLabel = styled48.label`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CharCount = styled48.span`
+var CharCount = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.monospace};
@@ -8412,7 +8591,7 @@ var CharCount = styled48.span`
   return tokens.colors.success;
 }};
 `;
-var EditTextarea = styled48.textarea`
+var EditTextarea = styled50.textarea`
   width: 100%;
   min-height: 100px;
   padding: ${tokens.spacing.sm};
@@ -8442,14 +8621,14 @@ var EditTextarea = styled48.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var ProgressBar2 = styled48.div`
+var ProgressBar2 = styled50.div`
   width: 100%;
   height: 3px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressFill = styled48.div`
+var ProgressFill = styled50.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -8460,12 +8639,12 @@ var ProgressFill = styled48.div`
   return tokens.colors.success;
 }};
 `;
-var Actions3 = styled48.div`
+var Actions3 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   justify-content: flex-end;
 `;
-var ActionButton5 = styled48.button`
+var ActionButton5 = styled50.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.md};
   font-size: ${tokens.typography.fontSize.sm};
@@ -8699,7 +8878,7 @@ var fadeIn2 = keyframes`
     transform: translateY(0);
   }
 `;
-var CardContainer = styled48.div`
+var CardContainer = styled50.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.md};
@@ -8712,7 +8891,7 @@ var CardContainer = styled48.div`
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
   }
 `;
-var PlatformHeader = styled48.div`
+var PlatformHeader = styled50.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -8720,7 +8899,7 @@ var PlatformHeader = styled48.div`
   padding-bottom: ${tokens.spacing.sm};
   border-bottom: 1px solid ${tokens.colors.border.default};
 `;
-var PlatformIcon = styled48.span`
+var PlatformIcon = styled50.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8732,13 +8911,13 @@ var PlatformIcon = styled48.span`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var PlatformName = styled48.span`
+var PlatformName = styled50.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var CharacterBadge = styled48.span`
+var CharacterBadge = styled50.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
   font-size: 11px;
@@ -8750,10 +8929,10 @@ var CharacterBadge = styled48.span`
   return tokens.colors.success;
 }};
 `;
-var ContentSection = styled48.div`
+var ContentSection = styled50.div`
   margin-bottom: ${tokens.spacing.sm};
 `;
-var PostContent = styled48.div`
+var PostContent = styled50.div`
   font-size: ${tokens.typography.fontSize.base};
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: 1.6;
@@ -8765,7 +8944,7 @@ var PostContent = styled48.div`
   /* Smooth fade-in animation when content appears */
   animation: ${fadeIn2} 0.4s ease-out;
 `;
-var PostContentEditable = styled48.textarea`
+var PostContentEditable = styled50.textarea`
   width: 100%;
   min-height: 180px;
   max-height: 300px;
@@ -8794,12 +8973,12 @@ var PostContentEditable = styled48.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var HashtagsContainer = styled48.div`
+var HashtagsContainer = styled50.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 `;
-var HashtagPill = styled48.span`
+var HashtagPill = styled50.span`
   display: inline-block;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
@@ -8816,17 +8995,17 @@ var HashtagPill = styled48.span`
     color: ${tokens.colors.primary};
   }
 `;
-var ProgressBarContainer = styled48.div`
+var ProgressBarContainer = styled50.div`
   margin-top: ${tokens.spacing.sm};
 `;
-var ProgressBarTrack = styled48.div`
+var ProgressBarTrack = styled50.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill2 = styled48.div`
+var ProgressBarFill2 = styled50.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -8837,7 +9016,7 @@ var ProgressBarFill2 = styled48.div`
   return tokens.colors.success;
 }};
 `;
-var ImageChangeButton = styled48.button`
+var ImageChangeButton = styled50.button`
   display: block;
   width: 100%;
   padding: 0;
@@ -8846,21 +9025,21 @@ var ImageChangeButton = styled48.button`
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 `;
-var ImagePreviewContainer = styled48.div`
+var ImagePreviewContainer = styled50.div`
   position: relative;
   margin-bottom: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
   border: 1px solid ${tokens.colors.border.default};
 `;
-var ImagePreview = styled48.img`
+var ImagePreview = styled50.img`
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
   display: block;
 `;
-var ImageOverlay = styled48.div`
+var ImageOverlay = styled50.div`
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
@@ -8879,12 +9058,12 @@ var ImageOverlay = styled48.div`
     opacity: 0.6;
   }
 `;
-var OverlayText = styled48.span`
+var OverlayText = styled50.span`
   color: white;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var ImagePlaceholder = styled48.div`
+var ImagePlaceholder = styled50.div`
   width: 100%;
   height: 200px;
   background: linear-gradient(
@@ -8914,7 +9093,7 @@ var ImagePlaceholder = styled48.div`
     }
   `}
 `;
-var PlaceholderIcon = styled48.div`
+var PlaceholderIcon = styled50.div`
   width: 48px;
   height: 48px;
   border: 2px solid white;
@@ -8936,13 +9115,13 @@ var shimmer = keyframes`
     background-position: 200% 0;
   }
 `;
-var SkeletonContent = styled48.div`
+var SkeletonContent = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm} 0;
 `;
-var SkeletonLine = styled48.div`
+var SkeletonLine = styled50.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -9043,13 +9222,13 @@ var PlatformCarousel = ({
   ] });
 };
 PlatformCarousel.displayName = "PlatformCarousel";
-var CarouselContainer = styled48.div`
+var CarouselContainer = styled50.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: ${tokens.spacing.md};
 `;
-var TabsContainer = styled48.div`
+var TabsContainer = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
@@ -9063,7 +9242,7 @@ var TabsContainer = styled48.div`
     display: none;
   }
 `;
-var PlatformTab = styled48.button`
+var PlatformTab = styled50.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9089,37 +9268,36 @@ var PlatformTab = styled48.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var PlatformIcon2 = styled48.span`
+var PlatformIcon2 = styled50.span`
   font-size: ${tokens.typography.fontSize.base};
   color: ${({ $platformColor }) => $platformColor};
   transition: color ${tokens.transitions.fast};
 `;
-var ContentContainer2 = styled48.div`
+var ContentContainer2 = styled50.div`
   position: relative;
   min-height: 200px;
   overflow: hidden;
-  /* Padding to prevent card borders/shadows from being clipped */
-  padding: 0 ${tokens.spacing.xs};
-  margin: 0 -${tokens.spacing.xs};
 `;
-var Slide = styled48.div`
+var Slide = styled50.div`
   position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
   top: 0;
   left: 0;
   width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
   opacity: ${({ $isActive }) => $isActive ? 1 : 0};
   transform: ${({ $isActive }) => $isActive ? "translateX(0)" : "translateX(20px)"};
   transition: opacity ${tokens.animation.duration.short} ${tokens.animation.easing.smooth},
     transform ${tokens.animation.duration.short} ${tokens.animation.easing.smooth};
   pointer-events: ${({ $isActive }) => $isActive ? "auto" : "none"};
 `;
-var NavigationDotsContainer = styled48.div`
+var NavigationDotsContainer = styled50.div`
   display: flex;
   justify-content: center;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
 `;
-var NavigationDot = styled48.button`
+var NavigationDot = styled50.button`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -9139,7 +9317,7 @@ var NavigationDot = styled48.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var EmptyState = styled48.div`
+var EmptyState = styled50.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9198,10 +9376,12 @@ var PlatformGrid = ({
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
-var Grid = styled48.div`
+var Grid = styled50.div`
   display: grid;
   gap: ${tokens.spacing.md};
   width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
   /* Mobile: 1 column */
   grid-template-columns: 1fr;
@@ -9216,7 +9396,7 @@ var Grid = styled48.div`
     grid-template-columns: repeat(3, 1fr);
   }
 `;
-var GridCell = styled48.div`
+var GridCell = styled50.div`
   min-width: 0; /* Prevent grid blowout with long content */
   cursor: pointer;
   border-radius: ${tokens.borderRadius.lg};
@@ -9226,7 +9406,7 @@ var GridCell = styled48.div`
     transform: translateY(-2px);
   }
 `;
-var EmptyState2 = styled48.div`
+var EmptyState2 = styled50.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9235,12 +9415,12 @@ var EmptyState2 = styled48.div`
   border: 1px dashed ${tokens.colors.border.hover};
   border-radius: ${tokens.borderRadius.lg};
 `;
-var EmptyStateText = styled48.p`
+var EmptyStateText = styled50.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var Container14 = styled48.div`
+var Container14 = styled50.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -9254,7 +9434,7 @@ var Container14 = styled48.div`
   );
   overflow: auto;
 `;
-var Header3 = styled48.div`
+var Header3 = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9280,7 +9460,7 @@ var Header3 = styled48.div`
     pointer-events: none;
   }
 `;
-var Title = styled48.h2`
+var Title = styled50.h2`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -9290,12 +9470,12 @@ var Title = styled48.h2`
   text-overflow: ellipsis;
   min-width: 0;
 `;
-var ViewToggle = styled48.div`
+var ViewToggle = styled50.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var ToggleButton = styled48.button`
+var ToggleButton = styled50.button`
   padding: ${tokens.spacing.xs};
   width: 32px;
   height: 32px;
@@ -9323,7 +9503,7 @@ var ToggleButton = styled48.button`
     background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
   }
 `;
-var Content4 = styled48.div`
+var Content4 = styled50.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -9332,7 +9512,7 @@ var Content4 = styled48.div`
   /* Extra top padding to account for header fade overlay */
   padding-top: ${tokens.spacing.md};
 `;
-var EmptyState3 = styled48.div`
+var EmptyState3 = styled50.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9360,7 +9540,7 @@ var EmptyState3 = styled48.div`
     font-size: ${tokens.typography.fontSize.sm};
   }
 `;
-var PostCount = styled48.span`
+var PostCount = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -9779,13 +9959,13 @@ var shimmer2 = keyframes`
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 `;
-var Icon2 = styled48.img`
+var Icon2 = styled50.img`
   width: 14px;
   height: 14px;
   vertical-align: middle;
   opacity: 0.8;
 `;
-var CardContainer2 = styled48.div`
+var CardContainer2 = styled50.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.lg};
@@ -9803,7 +9983,7 @@ var CardContainer2 = styled48.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var CardHeader = styled48.div`
+var CardHeader = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9816,12 +9996,12 @@ var CardHeader = styled48.div`
     align-items: flex-start;
   }
 `;
-var HeaderLeft = styled48.div`
+var HeaderLeft = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var SubredditBadgeContainer = styled48.span`
+var SubredditBadgeContainer = styled50.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9834,14 +10014,14 @@ var SubredditBadgeContainer = styled48.span`
   border: 1px solid ${({ $color }) => `${$color}40`};
   transition: all ${tokens.transitions.fast};
 `;
-var SubredditLink = styled48.a`
+var SubredditLink = styled50.a`
   text-decoration: none;
   &:hover ${SubredditBadgeContainer} {
     background: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ScoreBadgeContainer = styled48.div`
+var ScoreBadgeContainer = styled50.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
@@ -9850,42 +10030,42 @@ var ScoreBadgeContainer = styled48.div`
   background: ${({ $color }) => `${$color}20`};
   border: 1px solid ${({ $color }) => `${$color}40`};
 `;
-var ScoreValue = styled48.span`
+var ScoreValue = styled50.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-weight: ${tokens.typography.fontWeight.bold};
   color: ${tokens.colors.text.primary};
 `;
-var ScoreMax = styled48.span`
+var ScoreMax = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
 `;
-var ScoreLabel = styled48.span`
+var ScoreLabel = styled50.span`
   margin-left: ${tokens.spacing.xs};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
 `;
-var StatsContainer = styled48.div`
+var StatsContainer = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatItem = styled48.span`
+var StatItem = styled50.span`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatValue = styled48.span`
+var StatValue = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
 `;
-var StatDivider = styled48.span`
+var StatDivider = styled50.span`
   color: ${tokens.colors.text.tertiary};
 `;
-var PostPreviewSection = styled48.div`
+var PostPreviewSection = styled50.div`
   margin-bottom: ${tokens.spacing.md};
 `;
-var PostTitle = styled48.a`
+var PostTitle = styled50.a`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -9900,58 +10080,58 @@ var PostTitle = styled48.a`
     color: ${tokens.colors.primary};
   }
 `;
-var ExternalLinkIcon = styled48.span`
+var ExternalLinkIcon = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   flex-shrink: 0;
 `;
-var PostContent2 = styled48.p`
+var PostContent2 = styled50.p`
   font-size: ${tokens.typography.fontSize.base};
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.relaxed};
   margin-bottom: ${tokens.spacing.sm};
   white-space: pre-wrap;
 `;
-var PostAuthor = styled48.div`
+var PostAuthor = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var PostFlair = styled48.span`
+var PostFlair = styled50.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   background: ${tokens.colors.surface.overlay};
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
 `;
-var Divider = styled48.hr`
+var Divider = styled50.hr`
   border: none;
   height: 1px;
   background: ${tokens.colors.border.default};
   margin: ${tokens.spacing.md} 0;
 `;
-var ReplySection = styled48.div``;
-var ReplySectionHeader = styled48.div`
+var ReplySection = styled50.div``;
+var ReplySectionHeader = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.sm};
 `;
-var ReplyLabel = styled48.span`
+var ReplyLabel = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.secondary};
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
-var ReplyMeta = styled48.div`
+var ReplyMeta = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var ToneBadgeContainer = styled48.span`
+var ToneBadgeContainer = styled50.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9961,17 +10141,17 @@ var ToneBadgeContainer = styled48.span`
   background: ${({ $color }) => `${$color}20`};
   color: ${({ $color }) => $color};
 `;
-var ToneIcon = styled48.img`
+var ToneIcon = styled50.img`
   width: 12px;
   height: 12px;
 `;
-var CharacterCount = styled48.span`
+var CharacterCount = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-family: ${tokens.typography.fontFamily.monospace};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${({ $color }) => $color};
 `;
-var ReplyContent = styled48.div`
+var ReplyContent = styled50.div`
   font-size: ${tokens.typography.fontSize.base};
   line-height: ${tokens.typography.lineHeight.relaxed};
   color: ${tokens.colors.text.primary};
@@ -9984,7 +10164,7 @@ var ReplyContent = styled48.div`
   min-height: 100px;
   animation: ${fadeIn3} 0.3s ease-out;
 `;
-var ReplyTextarea = styled48.textarea`
+var ReplyTextarea = styled50.textarea`
   width: 100%;
   min-height: 150px;
   max-height: 400px;
@@ -10010,7 +10190,7 @@ var ReplyTextarea = styled48.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var StrategyHint = styled48.div`
+var StrategyHint = styled50.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -10019,40 +10199,40 @@ var StrategyHint = styled48.div`
   border-radius: ${tokens.borderRadius.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-var StrategyIconImg = styled48.img`
+var StrategyIconImg = styled50.img`
   width: 16px;
   height: 16px;
   opacity: 0.8;
 `;
-var StrategyText = styled48.span`
+var StrategyText = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   font-style: italic;
 `;
-var ProgressBarContainer2 = styled48.div`
+var ProgressBarContainer2 = styled50.div`
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarTrack2 = styled48.div`
+var ProgressBarTrack2 = styled50.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill3 = styled48.div`
+var ProgressBarFill3 = styled50.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
   transition: width 0.3s ease, background-color 0.3s ease;
   background: ${({ $color }) => $color};
 `;
-var SkeletonContent2 = styled48.div`
+var SkeletonContent2 = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var SkeletonLine2 = styled48.div`
+var SkeletonLine2 = styled50.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -10225,7 +10405,7 @@ var pulse4 = keyframes`
     box-shadow: 0 0 0 8px ${tokens.colors.primary}00;
   }
 `;
-var ControlsContainer = styled48.div`
+var ControlsContainer = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
@@ -10234,7 +10414,7 @@ var ControlsContainer = styled48.div`
   border-radius: ${tokens.borderRadius.lg};
   border: 1px solid ${tokens.colors.border.default};
 `;
-var EditModeSection = styled48.div`
+var EditModeSection = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10243,25 +10423,25 @@ var EditModeSection = styled48.div`
   border: 1px solid ${tokens.colors.status.editing}40;
   border-radius: ${tokens.borderRadius.md};
 `;
-var EditModeLabel = styled48.span`
+var EditModeLabel = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.status.editing};
 `;
-var EditModeActions = styled48.div`
+var EditModeActions = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var InputSection = styled48.div`
+var InputSection = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
 `;
-var InputLabel = styled48.label`
+var InputLabel = styled50.label`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
 `;
-var InputRow = styled48.div`
+var InputRow = styled50.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
@@ -10270,7 +10450,7 @@ var InputRow = styled48.div`
     flex-direction: column;
   }
 `;
-var TextInput = styled48.input`
+var TextInput = styled50.input`
   flex: 1;
   min-width: 0;
   padding: ${tokens.spacing.sm};
@@ -10294,7 +10474,7 @@ var TextInput = styled48.input`
     width: 100%;
   }
 `;
-var SmallButton = styled48.button`
+var SmallButton = styled50.button`
   padding: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.base};
   color: ${tokens.colors.text.tertiary};
@@ -10309,12 +10489,12 @@ var SmallButton = styled48.button`
     background: ${tokens.colors.surface.overlay};
   }
 `;
-var MainActions = styled48.div`
+var MainActions = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
 `;
-var SecondaryActions = styled48.div`
+var SecondaryActions = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -10325,7 +10505,7 @@ var SecondaryActions = styled48.div`
     }
   }
 `;
-var PrimaryActions = styled48.div`
+var PrimaryActions = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -10336,12 +10516,12 @@ var PrimaryActions = styled48.div`
     }
   }
 `;
-var Icon3 = styled48.img`
+var Icon3 = styled50.img`
   width: 16px;
   height: 16px;
   vertical-align: middle;
 `;
-var ActionButton6 = styled48.button`
+var ActionButton6 = styled50.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10532,7 +10712,7 @@ function TokenUsageCard({
   }
   return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
     /* @__PURE__ */ jsxs(Header4, { children: [
-      /* @__PURE__ */ jsx(Title2, { children: "Token Usage" }),
+      /* @__PURE__ */ jsx(Title2, { children: "Credit Usage" }),
       /* @__PURE__ */ jsx(Period, { children: periodLabel })
     ] }),
     /* @__PURE__ */ jsxs(UsageSection, { children: [
@@ -10559,7 +10739,7 @@ function TokenUsageCard({
           ] })
         ] }),
         /* @__PURE__ */ jsxs(TransactionTokens, { $type: transaction.type, children: [
-          transaction.type === "output" ? "+" : "",
+          transaction.type === "input" ? "+" : "-",
           formatNumber2(transaction.tokens)
         ] })
       ] }, transaction.id)) })
@@ -10568,7 +10748,7 @@ function TokenUsageCard({
     onViewAll && transactions.length > 0 && /* @__PURE__ */ jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
   ] });
 }
-var Card2 = styled48.div`
+var Card2 = styled50.div`
   display: flex;
   flex-direction: column;
   background: ${tokens.colors.background.darker};
@@ -10577,7 +10757,7 @@ var Card2 = styled48.div`
   height: 100%;
   overflow: hidden;
 `;
-var Header4 = styled48.div`
+var Header4 = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10587,65 +10767,65 @@ var Header4 = styled48.div`
   min-height: 48px;
   flex-shrink: 0;
 `;
-var Title2 = styled48.h3`
+var Title2 = styled50.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.lg};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
 `;
-var Period = styled48.span`
+var Period = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var UsageSection = styled48.div`
+var UsageSection = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var UsageStats = styled48.div`
+var UsageStats = styled50.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
 `;
-var CurrentUsage = styled48.span`
+var CurrentUsage = styled50.span`
   font-size: ${tokens.typography.fontSize["2xl"]};
   font-weight: ${tokens.typography.fontWeight.bold};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
 `;
-var UsageSeparator = styled48.span`
+var UsageSeparator = styled50.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var MaxUsage = styled48.span`
+var MaxUsage = styled50.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var ProgressContainer = styled48.div`
+var ProgressContainer = styled50.div`
   width: 100%;
   height: 8px;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var ProgressBar3 = styled48.div`
+var ProgressBar3 = styled50.div`
   height: 100%;
   width: ${({ $percentage }) => $percentage}%;
   background: ${({ $level }) => usageLevelColors[$level]};
   border-radius: ${tokens.borderRadius.full};
   transition: width ${tokens.transitions.normal}, background ${tokens.transitions.normal};
 `;
-var PercentageLabel = styled48.span`
+var PercentageLabel = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $level }) => usageLevelColors[$level]};
 `;
-var TransactionsSection = styled48.div`
+var TransactionsSection = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -10655,19 +10835,19 @@ var TransactionsSection = styled48.div`
   overflow-y: auto;
   min-height: 0;
 `;
-var TransactionsHeader = styled48.h4`
+var TransactionsHeader = styled50.h4`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var TransactionsList = styled48.div`
+var TransactionsList = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var TransactionItem = styled48.div`
+var TransactionItem = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -10684,7 +10864,7 @@ var TransactionItem = styled48.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var TransactionIcon = styled48.span`
+var TransactionIcon = styled50.span`
   width: 24px;
   height: 24px;
   display: flex;
@@ -10706,12 +10886,12 @@ var TransactionIcon = styled48.span`
 }};
   }
 `;
-var TransactionInfo = styled48.div`
+var TransactionInfo = styled50.div`
   flex: 1;
   min-width: 0;
   overflow: hidden;
 `;
-var TransactionDescription = styled48.div`
+var TransactionDescription = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
@@ -10719,7 +10899,7 @@ var TransactionDescription = styled48.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var TransactionMeta = styled48.div`
+var TransactionMeta = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -10733,21 +10913,21 @@ var TransactionMeta = styled48.div`
     white-space: nowrap;
   }
 `;
-var TransactionTokens = styled48.span`
+var TransactionTokens = styled50.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $type }) => typeColors[$type]};
   flex-shrink: 0;
 `;
-var EmptyState4 = styled48.div`
+var EmptyState4 = styled50.div`
   text-align: center;
   padding: ${tokens.spacing.lg} ${tokens.spacing.md};
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var ViewAllButton = styled48.button`
+var ViewAllButton = styled50.button`
   margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background: transparent;
@@ -10769,7 +10949,7 @@ var pulse5 = keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
 `;
-var SkeletonBlock = styled48.div`
+var SkeletonBlock = styled50.div`
   width: ${({ $width }) => $width};
   height: ${({ $height }) => $height};
   background: ${tokens.colors.background.light};
@@ -10847,7 +11027,7 @@ var WorkflowCard = ({
   );
 };
 WorkflowCard.displayName = "WorkflowCard";
-var Card3 = styled48.button`
+var Card3 = styled50.button`
   display: grid;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
@@ -10878,7 +11058,7 @@ var Card3 = styled48.button`
     cursor: not-allowed;
   }
 `;
-var WorkflowName2 = styled48.h3`
+var WorkflowName2 = styled50.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -10889,7 +11069,7 @@ var WorkflowName2 = styled48.h3`
   white-space: nowrap;
   min-width: 0;
 `;
-var Description2 = styled48.p`
+var Description2 = styled50.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
@@ -10901,7 +11081,7 @@ var Description2 = styled48.p`
   word-break: break-word;
   min-width: 0;
 `;
-var CardFooter = styled48.div`
+var CardFooter = styled50.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -10910,13 +11090,13 @@ var CardFooter = styled48.div`
   border-top: 1px solid ${tokens.colors.border.subtle};
   width: 100%;
 `;
-var IntegrationList = styled48.div`
+var IntegrationList = styled50.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var IntegrationIconWrapper = styled48.span`
+var IntegrationIconWrapper = styled50.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10938,12 +11118,12 @@ var IntegrationIconWrapper = styled48.span`
     }
   `}
 `;
-var IntegrationIcon = styled48.img`
+var IntegrationIcon = styled50.img`
   width: 16px;
   height: 16px;
   object-fit: contain;
 `;
-var Indicators = styled48.div`
+var Indicators = styled50.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -10951,7 +11131,7 @@ var Indicators = styled48.div`
   margin-left: auto;
   min-width: 0;
 `;
-var IndicatorPill = styled48.span`
+var IndicatorPill = styled50.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -10960,14 +11140,14 @@ var IndicatorPill = styled48.span`
   background: ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}15` : `${tokens.colors.info}15`};
   border: 1px solid ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}30` : `${tokens.colors.info}30`};
 `;
-var IndicatorDot = styled48.span`
+var IndicatorDot = styled50.span`
   width: 6px;
   height: 6px;
   border-radius: ${tokens.borderRadius.full};
   background: ${({ $variant }) => $variant === "warning" ? tokens.colors.warning : tokens.colors.info};
   flex-shrink: 0;
 `;
-var IndicatorText = styled48.span`
+var IndicatorText = styled50.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
@@ -10978,7 +11158,7 @@ var severityColors = {
   warning: tokens.colors.warning,
   info: tokens.colors.info
 };
-var AlertContainer = styled48.div`
+var AlertContainer = styled50.div`
   display: flex;
   flex-direction: column;
   background-color: ${(props) => {
@@ -10996,7 +11176,7 @@ var AlertContainer = styled48.div`
   max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ModalOverlay = styled48.div`
+var ModalOverlay = styled50.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -11009,53 +11189,53 @@ var ModalOverlay = styled48.div`
   z-index: ${tokens.zIndex.modal};
   padding: ${tokens.spacing.lg};
 `;
-var ModalContent = styled48.div`
+var ModalContent = styled50.div`
   background-color: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.lg};
   max-width: 500px;
   width: 100%;
   box-shadow: ${tokens.shadows.xl};
 `;
-var Header5 = styled48.div`
+var Header5 = styled50.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
 `;
-var IconContainer2 = styled48.div`
+var IconContainer2 = styled50.div`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   color: ${(props) => severityColors[props.severity]};
 `;
-var Content5 = styled48.div`
+var Content5 = styled50.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var Title3 = styled48.div`
+var Title3 = styled50.div`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var ErrorMessage2 = styled48.div`
+var ErrorMessage2 = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var ErrorCode = styled48.div`
+var ErrorCode = styled50.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
   font-family: ${tokens.typography.fontFamily.monospace};
   margin-top: ${tokens.spacing.xs};
 `;
-var Timestamp = styled48.div`
+var Timestamp = styled50.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Details = styled48.details`
+var Details = styled50.details`
   margin-top: ${tokens.spacing.md};
   cursor: pointer;
@@ -11078,12 +11258,12 @@ var Details = styled48.details`
     }
   }
 `;
-var DetailsIcon = styled48.span`
+var DetailsIcon = styled50.span`
   display: inline-block;
   transition: transform ${tokens.transitions.fast};
   transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
 `;
-var StackTrace = styled48.pre`
+var StackTrace = styled50.pre`
   margin: ${tokens.spacing.sm} 0 0 0;
   padding: ${tokens.spacing.md};
   background-color: ${tokens.colors.surface.subtle};
@@ -11096,12 +11276,12 @@ var StackTrace = styled48.pre`
   word-break: break-word;
   overflow-x: auto;
 `;
-var Actions4 = styled48.div`
+var Actions4 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.md};
 `;
-var Button4 = styled48.button`
+var Button4 = styled50.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -11130,7 +11310,7 @@ var Button4 = styled48.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton2 = styled48.button`
+var CloseButton2 = styled50.button`
   position: absolute;
   top: ${tokens.spacing.md};
   right: ${tokens.spacing.md};
@@ -11304,14 +11484,14 @@ var statusColors2 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var Container15 = styled48.div`
+var Container15 = styled50.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   width: 100%;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ProgressMessage = styled48.div`
+var ProgressMessage = styled50.div`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -11326,13 +11506,13 @@ var ProgressMessage = styled48.div`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ProgressInfo = styled48.div`
+var ProgressInfo = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.xs};
 `;
-var PercentageText = styled48.span`
+var PercentageText = styled50.span`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -11347,7 +11527,7 @@ var PercentageText = styled48.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
-var LinearTrack = styled48.div`
+var LinearTrack = styled50.div`
   position: relative;
   width: 100%;
   height: ${(props) => {
@@ -11365,7 +11545,7 @@ var LinearTrack = styled48.div`
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var LinearFill = styled48.div`
+var LinearFill = styled50.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -11376,12 +11556,12 @@ var LinearFill = styled48.div`
   transition: ${(props) => props.animated && !props.indeterminate ? `width ${tokens.transitions.normal}` : "none"};
   animation: ${(props) => props.indeterminate ? indeterminate : "none"} 1.5s ease-in-out infinite;
 `;
-var CircularContainer = styled48.div`
+var CircularContainer = styled50.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CircularSvg = styled48.svg`
+var CircularSvg = styled50.svg`
   width: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -11417,12 +11597,12 @@ var getCircularSize = (size) => {
       return { radius: 26, strokeWidth: 4 };
   }
 };
-var CircularTrack = styled48.circle`
+var CircularTrack = styled50.circle`
   fill: none;
   stroke: ${tokens.colors.border.default};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
 `;
-var CircularFill = styled48.circle`
+var CircularFill = styled50.circle`
   fill: none;
   stroke: ${(props) => statusColors2[props.status]};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
@@ -11440,7 +11620,7 @@ var CircularFill = styled48.circle`
   transition: ${(props) => props.animated && !props.indeterminate ? `stroke-dashoffset ${tokens.transitions.normal}` : "none"};
   animation: ${(props) => props.indeterminate ? rotate : "none"} 1.5s linear infinite;
 `;
-var CircularPercentage = styled48.text`
+var CircularPercentage = styled50.text`
   fill: ${tokens.colors.text.primary};
   font-size: ${(props) => {
   switch (props.size) {
@@ -11541,7 +11721,7 @@ var WorkflowProgressBar = ({
   ] });
 };
 WorkflowProgressBar.displayName = "WorkflowProgressBar";
-var Panel = styled48.div`
+var Panel = styled50.div`
   display: flex;
   flex-direction: column;
   background-color: ${tokens.colors.surface.overlay};
@@ -11550,7 +11730,7 @@ var Panel = styled48.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header6 = styled48.div`
+var Header6 = styled50.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11564,7 +11744,7 @@ var Header6 = styled48.div`
     background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
   }
 `;
-var Title4 = styled48.div`
+var Title4 = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -11572,11 +11752,11 @@ var Title4 = styled48.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var Actions5 = styled48.div`
+var Actions5 = styled50.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var IconButton = styled48.button`
+var IconButton = styled50.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11605,7 +11785,7 @@ var IconButton = styled48.button`
     height: 16px;
   }
 `;
-var CollapseIcon2 = styled48.div`
+var CollapseIcon2 = styled50.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11618,7 +11798,7 @@ var CollapseIcon2 = styled48.div`
     height: 16px;
   }
 `;
-var Content6 = styled48.div`
+var Content6 = styled50.div`
   padding: ${tokens.spacing.md};
   max-height: ${(props) => {
   if (!props.expanded) return "0";
@@ -11646,7 +11826,7 @@ var Content6 = styled48.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var JsonView = styled48.pre`
+var JsonView = styled50.pre`
   margin: 0;
   font-family: ${tokens.typography.fontFamily.monospace};
   font-size: ${tokens.typography.fontSize.sm};
@@ -11655,12 +11835,12 @@ var JsonView = styled48.pre`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-var FormattedView = styled48.div`
+var FormattedView = styled50.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var TableView = styled48.table`
+var TableView = styled50.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${tokens.typography.fontSize.sm};
@@ -11684,7 +11864,7 @@ var TableView = styled48.table`
     border-bottom: none;
   }
 `;
-var EmptyState5 = styled48.div`
+var EmptyState5 = styled50.div`
   padding: ${tokens.spacing.xl};
   text-align: center;
   color: ${tokens.colors.text.tertiary};
@@ -11780,7 +11960,7 @@ var statusColors3 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var BadgeContainer2 = styled48.div`
+var BadgeContainer2 = styled50.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -11834,7 +12014,7 @@ var BadgeContainer2 = styled48.div`
   color: ${(props) => statusColors3[props.$status]};
   line-height: 1.4;
 `;
-var IconContainer3 = styled48.div`
+var IconContainer3 = styled50.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11913,7 +12093,7 @@ var TimeoutIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
   }
 );
-var Label2 = styled48.span`
+var Label2 = styled50.span`
   white-space: nowrap;
 `;
 var getDefaultLabel = (status) => {
@@ -11971,6 +12151,6 @@ var WorkflowStatusBadge = ({
 };
 WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
-export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, clearToolCalls, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, registerToolCall, tokens };
+export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, BillingToggle, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText, Suggestions, TelegramIcon, TokenUsageCard, TrialPlanCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, clearToolCalls, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, registerToolCall, tokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map