@agentiffai/design 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -4,12 +4,12 @@ var react = require('react');
 var styled11 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 var button = require('@react-aria/button');
-var textfield = require('@react-aria/textfield');
 var meter = require('@react-aria/meter');
 var tabs$1 = require('@react-aria/tabs');
 var collections = require('@react-stately/collections');
 var tabs = require('@react-stately/tabs');
 var reactAriaComponents = require('react-aria-components');
+var textfield = require('@react-aria/textfield');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -462,7 +462,7 @@ var SuggestionButton = styled11__default.default.button`
   font-weight: ${tokens.typography.fontWeight.regular};
   text-align: center;
   border: 1px solid ${tokens.colors.border.default};
-  border-radius: 20px;
+  border-radius: ${tokens.borderRadius.full};
   cursor: pointer;
   transition: all ${tokens.transitions.fast};
   white-space: nowrap;
@@ -496,9 +496,9 @@ var SuggestionButton = styled11__default.default.button`
 `;
 var InputWrapper = styled11__default.default.div`
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
+  align-items: flex-end; /* Align button to bottom when textarea expands */
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background-color: rgba(25, 25, 25, 0.4);
   border: 1px solid ${tokens.colors.border.subtle};
   border-radius: ${tokens.borderRadius.lg};
@@ -512,7 +512,7 @@ var InputWrapper = styled11__default.default.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled11__default.default.input`
+var InputField = styled11__default.default.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -520,6 +520,13 @@ var InputField = styled11__default.default.input`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   background: transparent;
+  resize: none; /* Disable manual resize, we auto-resize */
+  min-height: 24px; /* Single line height */
+  max-height: 150px; /* Max ~6 lines before scrolling */
+  overflow-y: auto;
+  line-height: 1.5;
+  padding: 0;
+  margin: 0;
 
   &::placeholder {
     color: ${tokens.colors.text.tertiary};
@@ -575,31 +582,29 @@ var ChatInput = ({
   isReadOnly = false,
   autoFocus = false,
   className,
-  "aria-label": ariaLabel = "Chat message input",
-  ...ariaProps
+  "aria-label": ariaLabel = "Chat message input"
+  // Note: Additional AriaTextFieldProps are accepted but not spread to textarea
+  // since useTextField is not compatible with textarea elements
 }) => {
   const [internalValue, setInternalValue] = react.useState(value);
   const inputRef = react.useRef(null);
   const currentValue = value !== void 0 ? value : internalValue;
   const setValue = onChange || setInternalValue;
-  const { inputProps } = textfield.useTextField(
-    {
-      ...ariaProps,
-      "aria-label": ariaLabel,
-      value: currentValue,
-      onChange: (newValue) => {
-        setValue(newValue);
-      },
-      isDisabled,
-      isReadOnly
-    },
-    inputRef
-  );
+  const autoResize = react.useCallback(() => {
+    const textarea = inputRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, []);
+  react.useEffect(() => {
+    autoResize();
+  }, [currentValue, autoResize]);
   const handleDirectChange = (e) => {
     setValue(e.target.value);
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
     }
@@ -608,6 +613,9 @@ var ChatInput = ({
     if (currentValue.trim() && onSubmit && !isDisabled && !isReadOnly) {
       onSubmit(currentValue.trim());
       setValue("");
+      if (inputRef.current) {
+        inputRef.current.style.height = "auto";
+      }
       inputRef.current?.focus();
     }
   };
@@ -631,16 +639,16 @@ var ChatInput = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         InputField,
         {
-          ...inputProps,
           ref: inputRef,
-          type: "text",
+          "aria-label": ariaLabel,
           placeholder,
           onKeyDown: handleKeyDown,
           onChange: handleDirectChange,
           autoFocus,
           disabled: isDisabled,
           readOnly: isReadOnly,
-          value: currentValue
+          value: currentValue,
+          rows: 1
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -715,7 +723,7 @@ var NavigationContainer = styled11__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 6px;
+  padding-top: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
   width: 100%;
   height: 100%;
@@ -768,7 +776,7 @@ var CategoryButton = styled11__default.default.button`
 var CategoryLabel = styled11__default.default.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   text-align: center;
   max-width: 56px;
   overflow: hidden;
@@ -1056,8 +1064,10 @@ var Container2 = styled11__default.default.nav`
   right: 0;
   background-color: ${tokens.colors.background.darker};
   border-top: 1px solid ${tokens.colors.border.subtle};
-  /* Reserve space for Android nav buttons (80px) below the actual navbar */
-  padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
+  /* Use safe-area-inset-bottom for Android navigation buttons.
+     The env() value will be 0 on devices without soft nav buttons.
+     Fallback to 0 if env() is not supported. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
   z-index: ${tokens.zIndex.sticky};
 
   /* Dark theme support */
@@ -1615,7 +1625,7 @@ WorkflowStatusCard.displayName = "WorkflowStatusCard";
 var DarkNotificationCardContainer = styled11__default.default.div`
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background: ${tokens.colors.surface.base};
   border-radius: ${tokens.borderRadius.md};
   gap: ${tokens.spacing.xs};
@@ -1628,7 +1638,7 @@ var DarkSectionHeader = styled11__default.default.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: ${tokens.spacing.xs} 2px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   background: transparent;
   font-family: ${tokens.typography.fontFamily.primary};
@@ -1670,18 +1680,18 @@ var DarkChevronIcon = styled11__default.default.span`
 var DarkSectionContent = styled11__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: ${tokens.spacing.xs};
   padding-left: ${tokens.spacing.xs};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   min-width: 0;
   overflow: hidden;
 `;
 var DarkNotificationItemWrapper = styled11__default.default.button`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: ${tokens.spacing.xs};
   width: 100%;
-  padding: ${tokens.spacing.xs} 6px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   cursor: pointer;
   text-align: left;
@@ -1737,7 +1747,7 @@ var DarkItemIcon = styled11__default.default.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var DarkItemText = styled11__default.default.span`
@@ -2015,7 +2025,7 @@ var TabButton = styled11__default.default.button`
   flex-shrink: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.xs};
   }
 
@@ -2113,7 +2123,7 @@ styled11__default.default.button`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: 13px;
     gap: ${tokens.spacing.sm};
   }
@@ -2195,7 +2205,7 @@ var CategoryTitle = styled11__default.default.div`
   gap: ${tokens.spacing.sm};
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
+    gap: ${tokens.spacing.xs};
   }
 `;
 styled11__default.default.img`
@@ -2252,7 +2262,7 @@ var CategoryDisclosurePanel = styled11__default.default(reactAriaComponents.Disc
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding-left: 2px;
+    padding-left: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2274,7 +2284,7 @@ var ItemContainer = styled11__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 10px ${tokens.spacing.sm}; // Increased vertical padding from 4px to 10px for better breathing room
+  padding: ${tokens.spacing.sm} ${tokens.spacing.sm}; // Increased vertical padding from 4px to 8px for better breathing room
   border-radius: ${tokens.borderRadius.sm};
   cursor: pointer;
   transition: background-color ${tokens.transitions.fast};
@@ -2282,8 +2292,8 @@ var ItemContainer = styled11__default.default.div`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
-    padding: ${tokens.spacing.sm} 6px; // Increased vertical padding from 4px to 8px for mobile
+    gap: ${tokens.spacing.xs};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.xs}; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -2324,7 +2334,7 @@ var ItemHeader = styled11__default.default(reactAriaComponents.Button)`
   }
 `;
 var ItemDisclosurePanel = styled11__default.default(reactAriaComponents.DisclosurePanel)`
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
   margin-top: -${tokens.spacing.xs};
@@ -2335,7 +2345,7 @@ var ItemDisclosurePanel = styled11__default.default(reactAriaComponents.Disclosu
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 6px;
+    padding: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2656,7 +2666,7 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px" }, children: run.customContent })
-    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function normalizeCategory(category) {
@@ -2691,7 +2701,7 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2901,7 +2911,7 @@ function ConnectionsTabContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ConnectionDescription, { children: descriptionText }),
     /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
+    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: tokens.colors.text.secondary }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
     ] })
@@ -2944,7 +2954,8 @@ function PaneMenus({
   isOAuthConnecting = false,
   isOAuthLoading = false,
   connectionsSlot,
-  workflowsSlot
+  workflowsSlot,
+  usageSlot
 }) {
   const state = tabs.useTabListState({
     selectedKey: activeTab,
@@ -2956,7 +2967,7 @@ function PaneMenus({
     children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       workflowsSlot && /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Workflows", children: workflowsSlot }, "workflows"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Runs", children: /* @__PURE__ */ jsxRuntime.jsx(RunsTabContent, { runs, onRunSelect }) }, "runs"),
-      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Usage", children: /* @__PURE__ */ jsxRuntime.jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
+      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Usage", children: usageSlot || /* @__PURE__ */ jsxRuntime.jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Connections", children: connectionsSlot || /* @__PURE__ */ jsxRuntime.jsx(
         ConnectionsTabContent,
         {
@@ -3351,12 +3362,12 @@ var NotificationItemWrapper = styled11__default.default.button`
   align-items: center;
   gap: ${tokens.spacing.md};
   width: 100%;
-  padding: ${(props) => props.$isSelected ? `${tokens.spacing.md} ${tokens.spacing.md}` : `10px ${tokens.spacing.md}`};
+  padding: ${(props) => props.$isSelected ? `${tokens.spacing.md} ${tokens.spacing.md}` : `${tokens.spacing.sm} ${tokens.spacing.md}`};
   border: none;
   cursor: pointer;
   text-align: left;
   transition: all ${tokens.transitions.normal};
-  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : "10px"};
+  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : tokens.borderRadius.lg};
 
   /* Default state - transparent background */
   background-color: ${(props) => props.$isSelected ? tokens.colors.secondary : "transparent"};
@@ -3405,7 +3416,7 @@ var ItemIcon2 = styled11__default.default.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var ItemText = styled11__default.default.span`
@@ -3649,7 +3660,7 @@ var StyledUserMessage = styled11__default.default.button`
   && {
     background: ${tokens.colors.message.user} !important;
     color: ${tokens.colors.text.primary} !important;
-    border-radius: ${tokens.borderRadius.full} !important; /* Pill shape - fully rounded ends */
+    border-radius: ${tokens.borderRadius["2xl"]} !important; /* Rounded corners that work for multi-line */
   }
 
   /* Subtle shadow and glow effect */
@@ -3729,7 +3740,7 @@ var StyledUserMessage = styled11__default.default.button`
     }
   }
 `;
-function UserMessage({
+function UserMessageBase({
   children,
   className,
   isPressed = false,
@@ -3760,6 +3771,7 @@ function UserMessage({
     }
   );
 }
+var UserMessage = react.memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
 
 // src/theme/darkTheme.ts
@@ -3951,25 +3963,28 @@ var IntegrationCard = ({
   className
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className, "data-testid": "integration-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+    status && /* @__PURE__ */ jsxRuntime.jsx(StatusRow, { children: status }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ContentHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(IconWrapper3, { children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconImage, { src: icon, alt: name }) : icon }),
       /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
         description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
-      ] }),
-      status && /* @__PURE__ */ jsxRuntime.jsx(StatusWrapper, { children: status })
+      ] })
     ] }),
-    children && /* @__PURE__ */ jsxRuntime.jsx(ContentRow, { children }),
-    actions && /* @__PURE__ */ jsxRuntime.jsx(ActionsRow, { children: actions })
+    (children || actions) && /* @__PURE__ */ jsxRuntime.jsxs(ActionsRow, { children: [
+      children,
+      actions
+    ] })
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
 var Card = styled11__default.default.div`
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
@@ -3978,10 +3993,13 @@ var Card = styled11__default.default.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var Header = styled11__default.default.div`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: start;
+var StatusRow = styled11__default.default.div`
+  display: flex;
+  align-items: center;
+`;
+var ContentHeader = styled11__default.default.div`
+  display: flex;
+  align-items: flex-start;
   gap: ${tokens.spacing.sm};
 `;
 var IconWrapper3 = styled11__default.default.div`
@@ -4004,7 +4022,7 @@ var Info = styled11__default.default.div`
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  padding-top: 2px;
+  flex: 1;
 `;
 var Name = styled11__default.default.h3`
   margin: 0;
@@ -4019,21 +4037,10 @@ var Description = styled11__default.default.p`
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var StatusWrapper = styled11__default.default.div`
-  flex-shrink: 0;
-  padding-top: 2px;
-`;
-var ContentRow = styled11__default.default.div`
-  display: flex;
-  gap: ${tokens.spacing.sm};
-  align-items: center;
-  padding-left: calc(40px + ${tokens.spacing.sm});
-`;
 var ActionsRow = styled11__default.default.div`
   display: flex;
+  flex-direction: column;
   gap: ${tokens.spacing.sm};
-  justify-content: flex-end;
-  padding-top: ${tokens.spacing.xs};
 `;
 var EyeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Show" }),
@@ -4951,7 +4958,7 @@ var ActionButton2 = styled11__default.default.button`
     display: block;
   }
 `;
-var Header2 = ({
+var Header = ({
   title,
   subtitle,
   streamStatus,
@@ -5028,7 +5035,7 @@ var Header2 = ({
     ] })
   ] });
 };
-Header2.displayName = "Header";
+Header.displayName = "Header";
 var InputContainer = styled11__default.default.div`
 	display: flex;
 	flex-direction: column;
@@ -5236,6 +5243,9 @@ var Container12 = styled11__default.default.div`
   white-space: pre-wrap;
   word-break: break-word;
   line-height: ${tokens.typography.lineHeight.normal};
+  /* Performance optimizations for streaming text */
+  text-rendering: optimizeSpeed;
+  contain: content;
 `;
 var Cursor = styled11__default.default.span`
   display: inline-block;
@@ -5257,7 +5267,7 @@ var Cursor = styled11__default.default.span`
     }
   }
 `;
-var StreamingText2 = ({
+var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
@@ -5267,25 +5277,27 @@ var StreamingText2 = ({
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = react.useState("");
+  const [displayedText, setDisplayedText] = react.useState(content);
+  const wasStreamingRef = react.useRef(isStreaming);
+  const completionCalledRef = react.useRef(false);
   react.useEffect(() => {
-    if (isStreaming) {
-      setDisplayedText(content);
-      return;
+    setDisplayedText(content);
+    if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
+      completionCalledRef.current = true;
+      onStreamComplete?.();
     }
-    if (!isStreaming && displayedText !== content) {
-      setDisplayedText(content);
-      if (onStreamComplete) {
-        onStreamComplete();
-      }
+    if (isStreaming) {
+      completionCalledRef.current = false;
     }
-  }, [content, isStreaming, onStreamComplete, displayedText]);
+    wasStreamingRef.current = isStreaming;
+  }, [content, isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
   return /* @__PURE__ */ jsxRuntime.jsxs(Container12, { variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
   ] });
 };
+var StreamingText2 = react.memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
 var MessageContainer = styled11__default.default.div`
   display: flex;
@@ -5293,20 +5305,9 @@ var MessageContainer = styled11__default.default.div`
   align-items: flex-start;
   padding: ${tokens.spacing.sm} 0;
   max-width: 100%;
-
-  /* Fade in and slide up animation */
-  animation: fadeInSlideUp ${tokens.animation.duration.medium} ease-out;
-
-  @keyframes fadeInSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(${tokens.spacing.sm});
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+  /* GPU acceleration hint for smooth rendering during streaming */
+  will-change: contents;
+  contain: content;
 `;
 var AvatarContainer = styled11__default.default.div`
   flex-shrink: 0;
@@ -5341,9 +5342,8 @@ var ContentContainer = styled11__default.default.div`
   min-width: 0;
 `;
 var MessageContent = styled11__default.default.div`
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance during streaming */
+  background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
@@ -5353,24 +5353,25 @@ var MessageContent = styled11__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   word-wrap: break-word;
   white-space: pre-wrap;
+  /* Optimize text rendering */
+  text-rendering: optimizeSpeed;
 `;
 var LoadingDots3 = styled11__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance */
+  background-color: ${tokens.colors.surface.elevated};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
   width: fit-content;
 `;
-var bounce = styled11.keyframes`
-  0%, 60%, 100% {
-    transform: translateY(0);
+var pulse3 = styled11.keyframes`
+  0%, 100% {
+    opacity: 0.4;
   }
-  30% {
-    transform: translateY(-${tokens.spacing.sm});
+  50% {
+    opacity: 1;
   }
 `;
 var LoadingDot = styled11__default.default.div`
@@ -5378,7 +5379,8 @@ var LoadingDot = styled11__default.default.div`
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   background-color: ${tokens.colors.text.tertiary};
-  animation: ${bounce} 1.4s ease-in-out infinite;
+  /* Use simple opacity animation instead of transform bounce */
+  animation: ${pulse3} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
 var FileAttachmentContainer = styled11__default.default.div`
@@ -5573,7 +5575,7 @@ var StreamingIndicator = styled11__default.default.span`
     }
   }
 `;
-var AssistantMessage = ({
+var AssistantMessageBase = ({
   content = "",
   avatarUrl,
   avatarInitials: _avatarInitials = "AI",
@@ -5620,6 +5622,8 @@ var AssistantMessage = ({
     /* @__PURE__ */ jsxRuntime.jsx(ContentContainer, { children: renderContent() })
   ] });
 };
+var AssistantMessage = react.memo(AssistantMessageBase);
+AssistantMessage.displayName = "AssistantMessage";
 var MessagesContainer = styled11__default.default.div`
   display: flex;
   flex-direction: column;
@@ -6767,6 +6771,161 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
+var StyledIconWrapper3 = styled11__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
+  border-radius: ${({ theme }) => theme?.radii?.sm ?? "4px"};
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => (theme?.colors?.primary && typeof theme.colors.primary === "object" ? theme.colors.primary.light : theme?.colors?.primary) ?? "#0066FF"};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Remove default focus outline, using focus-visible instead */
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+function PostizIcon({
+  variant = "colored",
+  size = 24,
+  className,
+  style,
+  "aria-label": ariaLabel = "Postiz",
+  onPress,
+  ...ariaProps
+}) {
+  const ref = react.useRef(null);
+  const isInteractive = Boolean(onPress);
+  const { buttonProps } = button.useButton(
+    {
+      ...ariaProps,
+      onPress,
+      "aria-label": ariaLabel,
+      isDisabled: !isInteractive
+    },
+    ref
+  );
+  const role = isInteractive ? "button" : "img";
+  const ariaHidden = !isInteractive && !ariaLabel;
+  const colors = {
+    colored: {
+      purple: "#612bd3",
+      dark: "#131019",
+      white: "#fff",
+      stroke: "#131019"
+    },
+    black: {
+      purple: "black",
+      dark: "black",
+      white: "black",
+      stroke: "black"
+    },
+    white: {
+      purple: "white",
+      dark: "white",
+      white: "white",
+      stroke: "white"
+    }
+  };
+  const c = colors[variant];
+  const svgElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "26.74 0.02 460.94 509.34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M103.4 82.6c.4 5.6.8 12 1.4 19.1L125 362.4c2.3 29.1 3.4 43.8 9.9 54.4 5.7 9.4 14.4 16.7 24.5 21 11.6 4.9 26.1 3.7 55.2 1.4l199.8-15.4c18.9-1.5 31.7-2.5 41.2-4.8-3.2 7.5-8.1 14.3-14.5 19.5-9.6 8-23.9 11.4-52.4 17.9l-195 45c-28.5 6.5-42.8 9.9-54.8 6.8-10.7-2.7-20.3-8.6-27.3-17.1-8-9.6-11.4-23.9-17.9-52.4L34.7 184c-6.5-28.5-9.9-42.8-6.8-54.8 2.7-10.7 8.6-20.3 17.1-27.3 9.6-8 23.9-11.4 52.4-17.9z",
+            fill: c.purple
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M112.8 101.1c-1.1-14.8-2-25.2-1.9-33.6 0-8.2.9-13.6 2.8-18 3.6-8.6 9.8-15.8 17.7-20.8 4.1-2.5 9.2-4.2 17.4-5.4 8.2-1.3 18.8-2.2 33.5-3.3L382 4.4c14.8-1.1 25.2-2 33.6-1.9 8.2 0 13.6.9 18 2.8 8.6 3.6 15.8 9.8 20.8 17.7 2.5 4.1 4.2 9.2 5.4 17.4s2.2 18.8 3.3 33.5l20.2 260.8c1.1 14.8 2 25.2 1.9 33.6 0 8.2-.9 13.6-2.8 18-3.6 8.6-9.8 15.8-17.7 20.8-4.1 2.5-9.2 4.2-17.4 5.4-8.2 1.3-18.8 2.2-33.5 3.3l-199.7 15.4c-14.8 1.1-25.2 2-33.6 1.9-8.2 0-13.6-.9-18-2.8-8.6-3.6-15.8-9.8-20.8-17.7-2.5-4.1-4.2-9.2-5.4-17.4-1.3-8.2-2.2-18.8-3.3-33.5z",
+            fill: "none",
+            stroke: c.stroke,
+            strokeWidth: "4.9373"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "m182.9 27.9 199.7-15.4c14.9-1.2 25-1.9 33-1.9 7.7 0 11.9.9 14.9 2.2 7 3 13 8 17 14.6 1.7 2.9 3.2 6.8 4.5 14.5 1.3 7.8 2.1 18 3.2 32.9l20.2 260.8c1.2 14.9 1.9 25 1.9 33 0 7.7-.9 11.9-2.2 14.9-3 7-8 13-14.6 17-2.9 1.7-6.8 3.2-14.5 4.5-7.8 1.3-18 2.1-32.9 3.2l-199.7 15.3c-14.8 1.2-25 1.9-33 1.9-7.7 0-11.9-.9-14.9-2.2-7-3-13-8-17-14.6-1.7-2.9-3.2-6.8-4.5-14.5-1.3-7.8-2.1-18-3.2-32.9l-20.2-260.8c-1.2-14.8-1.9-25-1.9-33 0-7.7.9-11.9 2.2-14.9 3-7 8-13 14.6-17 2.9-1.7 6.8-3.2 14.5-4.5 7.9-1.1 18.1-1.9 32.9-3.1",
+            fill: c.white
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "m269.4 88.3 1.9 24.8c3.5-4.3 7.9-7.9 13.4-11 5.4-3.3 12.3-5.2 20.4-5.8 7.4-.6 14.7.3 21.4 2.7 7 2.4 13.3 6.4 18.8 12.5 5.7 5.7 10.6 13.7 14.5 23.8s6.3 22.5 7.5 37.2c.8 10.5.7 21.2-.5 31.9-1 10.7-3.4 20.4-7.3 29.1-4 8.7-9.7 16-17.2 21.9-7.3 5.6-16.7 8.9-28.4 9.8-8.3.7-15 .1-20-1.8-5-2.1-8.8-4.6-11.5-7.4l6.2 80-46.5 15.5L221.8 92zm26.4 149c5.7-.4 10.4-2.7 14.1-6.7 3.7-4.3 6.3-9.5 8-15.8 2-6.3 3.1-13.3 3.4-20.8.5-7.7.5-15.3-.1-22.9-.9-12.1-2.8-21.6-5.5-28.4-2.5-6.8-5.3-11.9-8.4-14.9-3.2-3.3-6.1-5.2-9.1-5.9-2.7-.7-4.9-1-6.3-.8-4 .3-7.7 2.1-11.2 5.1-3.6 3-5.9 7.2-7.3 12.9l7.1 91.9c1.2 1.7 3.2 3.3 5.6 4.9 2.5 1.2 5.7 1.7 9.7 1.4",
+            fill: c.dark
+          }
+        )
+      ]
+    }
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledIconWrapper3,
+      {
+        ...buttonProps,
+        ref,
+        className,
+        style,
+        $size: size,
+        children: svgElement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", width: size, height: size, ...style },
+      children: svgElement
+    }
+  );
+}
+PostizIcon.displayName = "PostizIcon";
 var ColoredVariant = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -7269,7 +7428,7 @@ var StyledXIcon = styled11__default.default.svg`
     &:focus-visible {
       outline: 2px solid ${theme?.colors?.primary ?? "#007bff"};
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: ${tokens.borderRadius.sm};
     }
   `}
 `;
@@ -7422,15 +7581,15 @@ YouTubeIcon.displayName = "YouTubeIcon";
 var PLATFORM_CONFIGS = {
   x: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { variant: "white", size: 20 }),
-    color: "#FFFFFF",
-    bgColor: "#000000",
+    color: tokens.colors.text.primary,
+    bgColor: tokens.colors.platform.x,
     maxChars: 280,
     name: "X (Twitter)",
     description: "Concise, punchy posts with 1-2 hashtags"
   },
   linkedin: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(LinkedInIcon, { variant: "colored", size: 20 }),
-    color: "#0A66C2",
+    color: tokens.colors.platform.linkedin,
     bgColor: "#f3f6f8",
     maxChars: 3e3,
     name: "LinkedIn",
@@ -7438,7 +7597,7 @@ var PLATFORM_CONFIGS = {
   },
   instagram: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(InstagramIcon, { variant: "colored", size: 20 }),
-    color: "#E4405F",
+    color: tokens.colors.platform.instagram,
     bgColor: "#fafafa",
     maxChars: 2200,
     name: "Instagram",
@@ -7446,7 +7605,7 @@ var PLATFORM_CONFIGS = {
   },
   facebook: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(FacebookIcon, { variant: "colored", size: 20 }),
-    color: "#1877F2",
+    color: tokens.colors.platform.facebook,
     bgColor: "#f0f2f5",
     maxChars: 63206,
     name: "Facebook",
@@ -7454,7 +7613,7 @@ var PLATFORM_CONFIGS = {
   },
   youtube: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(YouTubeIcon, { variant: "colored", size: 20 }),
-    color: "#FF0000",
+    color: tokens.colors.platform.youtube,
     bgColor: "#f9f9f9",
     maxChars: 5e3,
     name: "YouTube",
@@ -7515,10 +7674,12 @@ function getCharacterCount(content, hashtags) {
   return (content + hashtagString).length;
 }
 function isWithinCharLimit(platform, characterCount) {
-  return characterCount <= PLATFORM_CONFIGS[platform].maxChars;
+  const config = PLATFORM_CONFIGS[platform] || PLATFORM_CONFIGS.x;
+  return characterCount <= config.maxChars;
 }
 function getCharacterLimitPercentage(platform, characterCount) {
-  return Math.min(100, characterCount / PLATFORM_CONFIGS[platform].maxChars * 100);
+  const config = PLATFORM_CONFIGS[platform] || PLATFORM_CONFIGS.x;
+  return Math.min(100, characterCount / config.maxChars * 100);
 }
 function getCharacterLimitColor(percentage) {
   if (percentage > 100) return "bg-red-500";
@@ -7575,7 +7736,7 @@ var PostApprovalControls = ({
     setIsEditing(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Container13, { "data-testid": "post-approval-controls", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header3, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header2, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
       /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { $color: statusConfig.color, children: statusConfig.label }),
       /* @__PURE__ */ jsxRuntime.jsxs(MetaInfo, { children: [
         postId && /* @__PURE__ */ jsxRuntime.jsxs(PostId, { children: [
@@ -7644,7 +7805,7 @@ var Container13 = styled11__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header3 = styled11__default.default.div`
+var Header2 = styled11__default.default.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -7836,7 +7997,7 @@ var PostPreviewCard = ({
   onContentChange,
   isLoading = false
 }) => {
-  const platformConfig = PLATFORM_CONFIGS[post.platform];
+  const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
   const currentCharCount = displayContent.length;
@@ -7899,6 +8060,16 @@ var PostPreviewCard = ({
   );
 };
 PostPreviewCard.displayName = "PostPreviewCard";
+var fadeIn2 = styled11.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
 var CardContainer = styled11__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.lg};
@@ -7962,6 +8133,8 @@ var PostContent = styled11__default.default.div`
   word-break: break-word;
   margin-bottom: ${tokens.spacing.sm};
   letter-spacing: 0.01em;
+  /* Smooth fade-in animation when content appears */
+  animation: ${fadeIn2} 0.4s ease-out;
 `;
 var PostContentEditable = styled11__default.default.textarea`
   width: 100%;
@@ -8021,13 +8194,13 @@ var ProgressBarTrack = styled11__default.default.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
-  border-radius: 2px;
+  border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
 var ProgressBarFill2 = styled11__default.default.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
-  border-radius: 2px;
+  border-radius: ${tokens.borderRadius.sm};
   transition: width 0.3s ease, background-color 0.3s ease;
   background: ${({ $colorClass }) => {
   if ($colorClass.includes("red")) return tokens.colors.error;
@@ -8099,9 +8272,21 @@ var PlatformCarousel = ({
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(CarouselContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No posts available" }) });
   }
+  const defaultConfig = {
+    icon: null,
+    color: tokens.colors.text.secondary,
+    bgColor: tokens.colors.background.light,
+    maxChars: 1e3,
+    name: "Unknown",
+    description: "Unknown platform"
+  };
+  const getConfig = (platform) => {
+    const normalized = normalizePlatform(platform);
+    return normalized ? PLATFORM_CONFIGS[normalized] : defaultConfig;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(CarouselContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TabsContainer, { children: posts.map((post, index) => {
-      const config = PLATFORM_CONFIGS[post.platform];
+      const config = getConfig(post.platform);
       const isActive = index === activeIndex;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         PlatformTab,
@@ -8134,7 +8319,7 @@ var PlatformCarousel = ({
       ) }, `slide-${post.platform}-${index}`);
     }) }),
     posts.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(NavigationDotsContainer, { children: posts.map((post, index) => {
-      const config = PLATFORM_CONFIGS[post.platform];
+      const config = getConfig(post.platform);
       return /* @__PURE__ */ jsxRuntime.jsx(
         NavigationDot,
         {
@@ -8256,23 +8441,46 @@ var PlatformGrid = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  activeIndex = 0,
+  onActiveChange
 }) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStateText, { children: "No posts to display" }) });
   }
+  const handlePostClick = (index) => {
+    onActiveChange?.(index);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(Grid, { "data-testid": "platform-grid", children: posts.map((post, index) => {
     const isEditing = editingIndex === index;
-    return /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      PostPreviewCard,
+    const isActive = activeIndex === index;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GridCell,
       {
-        post,
-        isEditing,
-        editContent: isEditing ? editContent : void 0,
-        onContentChange: isEditing ? onEditContentChange : void 0,
-        isLoading
-      }
-    ) }, post.platform);
+        $isActive: isActive,
+        onClick: () => handlePostClick(index),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handlePostClick(index);
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          PostPreviewCard,
+          {
+            post,
+            isActive,
+            isEditing,
+            editContent: isEditing ? editContent : void 0,
+            onContentChange: isEditing ? onEditContentChange : void 0,
+            isLoading
+          }
+        )
+      },
+      post.platform
+    );
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
@@ -8296,6 +8504,13 @@ var Grid = styled11__default.default.div`
 `;
 var GridCell = styled11__default.default.div`
   min-width: 0; /* Prevent grid blowout with long content */
+  cursor: pointer;
+  border-radius: ${tokens.borderRadius.lg};
+  transition: transform ${tokens.transitions.fast};
+
+  &:hover {
+    transform: translateY(-2px);
+  }
 `;
 var EmptyState2 = styled11__default.default.div`
   display: flex;
@@ -8316,7 +8531,7 @@ var Container14 = styled11__default.default.div`
   flex-direction: column;
   height: 100%;
   width: 100%;
-  padding: ${tokens.spacing.md};
+  padding: ${tokens.spacing.md} ${tokens.spacing.md} 0 ${tokens.spacing.md};
   box-sizing: border-box;
   background: linear-gradient(
     180deg,
@@ -8325,7 +8540,7 @@ var Container14 = styled11__default.default.div`
   );
   overflow: auto;
 `;
-var Header4 = styled11__default.default.div`
+var Header3 = styled11__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8414,7 +8629,8 @@ var SocialMediaCanvas = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  activeIndex = 0
 }) => {
   const [viewMode, setViewMode] = react.useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -8428,7 +8644,7 @@ var SocialMediaCanvas = ({
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Container14, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header3, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         title,
         " ",
@@ -8476,7 +8692,9 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        activeIndex,
+        onActiveChange: handleActiveChange
       }
     ) })
   ] });
@@ -8539,7 +8757,7 @@ function TokenUsageCard({
   );
   const usageLevel = react.useMemo(() => getUsageLevel(percentage), [percentage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header5, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "Token Usage" }),
       /* @__PURE__ */ jsxRuntime.jsx(Period, { children: periodLabel })
     ] }),
@@ -8582,10 +8800,10 @@ var Card2 = styled11__default.default.div`
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.lg};
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
 `;
-var Header5 = styled11__default.default.div`
+var Header4 = styled11__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8805,7 +9023,7 @@ var Card3 = styled11__default.default.button`
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
   cursor: pointer;
   text-align: left;
@@ -8893,8 +9111,8 @@ var Indicators = styled11__default.default.div`
 var IndicatorPill = styled11__default.default.span`
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   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`};
@@ -8955,7 +9173,7 @@ var ModalContent = styled11__default.default.div`
   width: 100%;
   box-shadow: ${tokens.shadows.xl};
 `;
-var Header6 = styled11__default.default.div`
+var Header5 = styled11__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
@@ -9180,7 +9398,7 @@ var WorkflowErrorAlert = ({
         return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {});
     }
   };
-  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header6, { children: [
+  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header5, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { severity, "aria-hidden": "true", children: getIcon() }),
     /* @__PURE__ */ jsxRuntime.jsxs(Content5, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title3, { children: displayTitle }),
@@ -9489,7 +9707,7 @@ var Panel = styled11__default.default.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header7 = styled11__default.default.div`
+var Header6 = styled11__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9682,7 +9900,7 @@ var WorkflowResultPanel = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { collapsible, expanded, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header7, { collapsible, onClick: handleToggle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header6, { collapsible, onClick: handleToggle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Title4, { children: [
         title,
         collapsible && /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon2, { expanded, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon4, {}) })
@@ -9704,7 +9922,7 @@ var spin = styled11.keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse3 = styled11.keyframes`
+var pulse4 = styled11.keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -9782,7 +10000,7 @@ var IconContainer3 = styled11__default.default.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse3;
+    if (props.$status === "pending") return pulse4;
   }
   return "none";
 }}
@@ -9927,7 +10145,7 @@ exports.FileAttachment = FileAttachment;
 exports.Footer = Footer;
 exports.GlobalStyle = GlobalStyle;
 exports.GmailIcon = GmailIcon;
-exports.Header = Header2;
+exports.Header = Header;
 exports.Icon = Icon;
 exports.IconNames = IconNames;
 exports.Input = Input2;
@@ -9949,6 +10167,7 @@ exports.PlatformCarousel = PlatformCarousel;
 exports.PlatformGrid = PlatformGrid;
 exports.PostApprovalControls = PostApprovalControls;
 exports.PostPreviewCard = PostPreviewCard;
+exports.PostizIcon = PostizIcon;
 exports.RedditIcon = RedditIcon;
 exports.Response = Response;
 exports.SecretInput = SecretInput;