@agentiffai/design 1.3.20 → 1.3.22

package/dist/index.d.cts

@@ -443,6 +443,8 @@ interface PostPreviewCardProps {
     onContentChange?: (content: string) => void;
     /** Show loading skeleton when content is being generated */
     isLoading?: boolean;
+    /** Callback to change/add an image. When provided, image areas become clickable. */
+    onImageChange?: () => void;
 }
 declare const PostPreviewCard: React__default.FC<PostPreviewCardProps>;
 
@@ -464,6 +466,8 @@ interface PlatformCarouselProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 declare const PlatformCarousel: React__default.FC<PlatformCarouselProps>;
 
@@ -488,6 +492,8 @@ interface PlatformGridProps {
     activeIndex?: number;
     /** Callback when a post is clicked/selected */
     onActiveChange?: (index: number) => void;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * PlatformGrid displays all proposed posts in a responsive grid layout.
@@ -531,6 +537,8 @@ interface SocialMediaCanvasProps {
     isLoading?: boolean;
     /** Currently active post index (for grid mode) */
     activeIndex?: number;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * SocialMediaCanvas displays social media post previews in carousel or grid mode.
@@ -700,7 +708,9 @@ interface TokenUsageCardProps {
     periodLabel: string;
     onViewAll?: () => void;
     className?: string;
+    /** Show loading skeleton state */
+    loading?: boolean;
 }
-declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, }: TokenUsageCardProps): React__default.ReactElement;
+declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, loading, }: TokenUsageCardProps): React__default.ReactElement;
 
 export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, UserMessage, type UserMessageProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, normalizePlatform };

package/dist/index.d.ts

@@ -443,6 +443,8 @@ interface PostPreviewCardProps {
     onContentChange?: (content: string) => void;
     /** Show loading skeleton when content is being generated */
     isLoading?: boolean;
+    /** Callback to change/add an image. When provided, image areas become clickable. */
+    onImageChange?: () => void;
 }
 declare const PostPreviewCard: React__default.FC<PostPreviewCardProps>;
 
@@ -464,6 +466,8 @@ interface PlatformCarouselProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 declare const PlatformCarousel: React__default.FC<PlatformCarouselProps>;
 
@@ -488,6 +492,8 @@ interface PlatformGridProps {
     activeIndex?: number;
     /** Callback when a post is clicked/selected */
     onActiveChange?: (index: number) => void;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * PlatformGrid displays all proposed posts in a responsive grid layout.
@@ -531,6 +537,8 @@ interface SocialMediaCanvasProps {
     isLoading?: boolean;
     /** Currently active post index (for grid mode) */
     activeIndex?: number;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * SocialMediaCanvas displays social media post previews in carousel or grid mode.
@@ -700,7 +708,9 @@ interface TokenUsageCardProps {
     periodLabel: string;
     onViewAll?: () => void;
     className?: string;
+    /** Show loading skeleton state */
+    loading?: boolean;
 }
-declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, }: TokenUsageCardProps): React__default.ReactElement;
+declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, loading, }: TokenUsageCardProps): React__default.ReactElement;
 
 export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, UserMessage, type UserMessageProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, normalizePlatform };

package/dist/index.js

@@ -8533,9 +8533,11 @@ var PostPreviewCard = ({
   isEditing = false,
   editContent,
   onContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChange
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
+  const [imageError, setImageError] = useState(false);
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
   const currentCharCount = displayContent.length;
@@ -8585,14 +8587,96 @@ var PostPreviewCard = ({
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
         ] }),
-        post.imageUrl ? /* @__PURE__ */ jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsx(ImagePreview, { src: post.imageUrl, alt: "Post image preview" }) }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
-          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-            /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-            /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
-          ] }) }),
+        post.imageUrl && !imageError ? onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Change image", children: /* @__PURE__ */ jsxs(ImagePreviewContainer, { children: [
+          /* @__PURE__ */ jsx(
+            ImagePreview,
+            {
+              src: post.imageUrl,
+              alt: "Post image preview",
+              onError: () => setImageError(true)
+            }
+          ),
+          /* @__PURE__ */ jsx(ImageOverlay, { children: /* @__PURE__ */ jsx(OverlayText, { children: "Change image" }) })
+        ] }) }) : /* @__PURE__ */ jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsx(
+          ImagePreview,
+          {
+            src: post.imageUrl,
+            alt: "Post image preview",
+            onError: () => setImageError(true)
+          }
+        ) }) : post.imageUrl && imageError ? onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Replace image", children: /* @__PURE__ */ jsxs(ImagePlaceholder, { $clickable: true, children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "Image unavailable",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: "Tap to replace image" })
+        ] }) }) : /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "Image unavailable",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: "Image unavailable" })
+        ] }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && (onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Add image", children: /* @__PURE__ */ jsxs(ImagePlaceholder, { $clickable: true, children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "Add image",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: "Tap to add image" })
+        ] }) }) : /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "No image attached",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsx("span", { children: "No image attached" })
-        ] }),
+        ] })),
         /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBarTrack, { children: /* @__PURE__ */ jsx(
           ProgressBarFill2,
           {
@@ -8753,7 +8837,17 @@ var ProgressBarFill2 = styled48.div`
   return tokens.colors.success;
 }};
 `;
+var ImageChangeButton = styled48.button`
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+`;
 var ImagePreviewContainer = styled48.div`
+  position: relative;
   margin-bottom: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
@@ -8766,6 +8860,30 @@ var ImagePreview = styled48.img`
   object-fit: cover;
   display: block;
 `;
+var ImageOverlay = styled48.div`
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity ${tokens.transitions.fast};
+
+  ${ImageChangeButton}:hover &,
+  ${ImageChangeButton}:focus-visible & {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    opacity: 0.6;
+  }
+`;
+var OverlayText = styled48.span`
+  color: white;
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+`;
 var ImagePlaceholder = styled48.div`
   width: 100%;
   height: 200px;
@@ -8785,8 +8903,16 @@ var ImagePlaceholder = styled48.div`
   gap: ${tokens.spacing.sm};
   color: white;
   font-size: ${tokens.typography.fontSize.sm};
-  opacity: 0.8;
+  opacity: ${({ $clickable }) => $clickable ? 0.9 : 0.8};
   margin-bottom: ${tokens.spacing.sm};
+  transition: opacity ${tokens.transitions.fast};
+
+  ${({ $clickable }) => $clickable && `
+    ${ImageChangeButton}:hover &,
+    ${ImageChangeButton}:focus-visible & {
+      opacity: 1;
+    }
+  `}
 `;
 var PlaceholderIcon = styled48.div`
   width: 48px;
@@ -8835,7 +8961,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChangeRequest
 }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   useEffect(() => {
@@ -8895,7 +9022,8 @@ var PlatformCarousel = ({
           isEditing,
           editContent: isEditing ? editContent : void 0,
           onContentChange: isEditing ? onEditContentChange : void 0,
-          isLoading
+          isLoading,
+          onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
         }
       ) }, `slide-${post.platform}-${index}`);
     }) }),
@@ -9027,7 +9155,8 @@ var PlatformGrid = ({
   onEditContentChange,
   isLoading = false,
   activeIndex = 0,
-  onActiveChange
+  onActiveChange,
+  onImageChangeRequest
 }) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx(EmptyState2, { children: /* @__PURE__ */ jsx(EmptyStateText, { children: "No posts to display" }) });
@@ -9059,7 +9188,8 @@ var PlatformGrid = ({
             isEditing,
             editContent: isEditing ? editContent : void 0,
             onContentChange: isEditing ? onEditContentChange : void 0,
-            isLoading
+            isLoading,
+            onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
           }
         )
       },
@@ -9251,7 +9381,8 @@ var SocialMediaCanvas = ({
   editContent,
   onEditContentChange,
   isLoading = false,
-  activeIndex = 0
+  activeIndex = 0,
+  onImageChangeRequest
 }) => {
   const [viewMode, setViewMode] = useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -9308,7 +9439,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        onImageChangeRequest
       }
     ) : /* @__PURE__ */ jsx(
       PlatformGrid,
@@ -9319,7 +9451,8 @@ var SocialMediaCanvas = ({
         onEditContentChange,
         isLoading,
         activeIndex,
-        onActiveChange: handleActiveChange
+        onActiveChange: handleActiveChange,
+        onImageChangeRequest
       }
     ) })
   ] });
@@ -10316,6 +10449,11 @@ var ActionButton6 = styled48.button`
       animation: ${pulse4} 2s ease-in-out infinite;
     `}
 `;
+var TYPE_ICONS = {
+  input: "/assets/icon-set/Icon-arrow-up-fill.svg",
+  output: "/assets/icon-set/Icon-download-2-fill.svg",
+  system: "/assets/icon-set/Icon-settings-3-fill.svg"
+};
 function formatNumber2(num) {
   if (num >= 1e6) {
     return `${(num / 1e6).toFixed(1)}M`;
@@ -10349,11 +10487,6 @@ var usageLevelColors = {
   high: "#ff8c00",
   critical: tokens.colors.error
 };
-var typeIcons = {
-  input: "\u2191",
-  output: "\u2193",
-  system: "\u2699"
-};
 var typeColors = {
   input: tokens.colors.info,
   output: tokens.colors.success,
@@ -10365,13 +10498,38 @@ function TokenUsageCard({
   transactions,
   periodLabel,
   onViewAll,
-  className
+  className,
+  loading = false
 }) {
   const percentage = useMemo(
     () => Math.min(currentUsage / maxLimit * 100, 100),
     [currentUsage, maxLimit]
   );
   const usageLevel = useMemo(() => getUsageLevel(percentage), [percentage]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card-loading", children: [
+      /* @__PURE__ */ jsxs(Header4, { children: [
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "120px", $height: "20px" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "80px", $height: "16px" })
+      ] }),
+      /* @__PURE__ */ jsxs(UsageSection, { children: [
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "160px", $height: "28px" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "100%", $height: "8px", $radius: tokens.borderRadius.full }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "80px", $height: "14px" })
+      ] }),
+      /* @__PURE__ */ jsxs(TransactionsSection, { children: [
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "100px", $height: "14px" }),
+        /* @__PURE__ */ jsx(TransactionsList, { children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(TransactionItem, { children: [
+          /* @__PURE__ */ jsx(SkeletonBlock, { $width: "24px", $height: "24px", $radius: tokens.borderRadius.sm }),
+          /* @__PURE__ */ jsxs(TransactionInfo, { children: [
+            /* @__PURE__ */ jsx(SkeletonBlock, { $width: "70%", $height: "14px" }),
+            /* @__PURE__ */ jsx(SkeletonBlock, { $width: "50%", $height: "12px" })
+          ] }),
+          /* @__PURE__ */ jsx(SkeletonBlock, { $width: "32px", $height: "14px" })
+        ] }, i)) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
     /* @__PURE__ */ jsxs(Header4, { children: [
       /* @__PURE__ */ jsx(Title2, { children: "Token Usage" }),
@@ -10392,7 +10550,7 @@ function TokenUsageCard({
     transactions.length > 0 && /* @__PURE__ */ jsxs(TransactionsSection, { children: [
       /* @__PURE__ */ jsx(TransactionsHeader, { children: "Recent Activity" }),
       /* @__PURE__ */ jsx(TransactionsList, { children: transactions.slice(0, 5).map((transaction) => /* @__PURE__ */ jsxs(TransactionItem, { children: [
-        /* @__PURE__ */ jsx(TransactionIcon, { $type: transaction.type, children: typeIcons[transaction.type] }),
+        /* @__PURE__ */ jsx(TransactionIcon, { $type: transaction.type, children: /* @__PURE__ */ jsx("img", { src: TYPE_ICONS[transaction.type], alt: "", width: 14, height: 14 }) }),
         /* @__PURE__ */ jsxs(TransactionInfo, { children: [
           /* @__PURE__ */ jsx(TransactionDescription, { children: transaction.description }),
           /* @__PURE__ */ jsxs(TransactionMeta, { children: [
@@ -10414,18 +10572,20 @@ var Card2 = styled48.div`
   display: flex;
   flex-direction: column;
   background: ${tokens.colors.background.darker};
-  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.xl};
+  height: 100%;
   overflow: hidden;
 `;
 var Header4 = styled48.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  padding: 0 0.5rem;
   background: ${tokens.colors.background.darker};
   border-bottom: 1px solid ${tokens.colors.border.default};
   min-height: 48px;
+  flex-shrink: 0;
 `;
 var Title2 = styled48.h3`
   margin: 0;
@@ -10489,9 +10649,11 @@ var TransactionsSection = styled48.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
-  padding: ${tokens.spacing.md};
-  padding-top: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md} ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.subtle};
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 `;
 var TransactionsHeader = styled48.h4`
   margin: 0;
@@ -10503,15 +10665,24 @@ var TransactionsHeader = styled48.h4`
 var TransactionsList = styled48.div`
   display: flex;
   flex-direction: column;
-  gap: ${tokens.spacing.xs};
+  gap: ${tokens.spacing.sm};
 `;
 var TransactionItem = styled48.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
-  background: ${tokens.colors.background.darker};
-  border-radius: ${tokens.borderRadius.sm};
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  border: 1px solid ${tokens.colors.border.default};
+  min-width: 0;
+  overflow: hidden;
+  transition: border-color ${tokens.transitions.fast},
+    background-color ${tokens.transitions.fast};
+
+  &:hover {
+    border-color: ${tokens.colors.border.hover};
+  }
 `;
 var TransactionIcon = styled48.span`
   width: 24px;
@@ -10519,14 +10690,26 @@ var TransactionIcon = styled48.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: ${tokens.typography.fontSize.sm};
-  color: ${({ $type }) => typeColors[$type]};
+  flex-shrink: 0;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.sm};
+
+  img {
+    filter: ${({ $type }) => {
+  if ($type === "input") {
+    return "brightness(0) saturate(100%) invert(55%) sepia(83%) saturate(1956%) hue-rotate(190deg) brightness(101%) contrast(101%)";
+  }
+  if ($type === "output") {
+    return "brightness(0) saturate(100%) invert(73%) sepia(34%) saturate(547%) hue-rotate(99deg) brightness(91%) contrast(89%)";
+  }
+  return "brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(85%)";
+}};
+  }
 `;
 var TransactionInfo = styled48.div`
   flex: 1;
   min-width: 0;
+  overflow: hidden;
 `;
 var TransactionDescription = styled48.div`
   font-size: ${tokens.typography.fontSize.sm};
@@ -10542,12 +10725,20 @@ var TransactionMeta = styled48.div`
   font-size: ${tokens.typography.fontSize.xs};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
+  overflow: hidden;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 var TransactionTokens = styled48.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`
   text-align: center;
@@ -10574,6 +10765,17 @@ var ViewAllButton = styled48.button`
     color: ${tokens.colors.text.primary};
   }
 `;
+var pulse5 = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+`;
+var SkeletonBlock = styled48.div`
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  background: ${tokens.colors.background.light};
+  border-radius: ${({ $radius }) => $radius || tokens.borderRadius.sm};
+  animation: ${pulse5} 1.5s ease-in-out infinite;
+`;
 var WorkflowCard = ({
   id,
   name,
@@ -11564,7 +11766,7 @@ var spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse5 = keyframes`
+var pulse6 = keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -11642,7 +11844,7 @@ var IconContainer3 = styled48.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse5;
+    if (props.$status === "pending") return pulse6;
   }
   return "none";
 }}