@agentiffai/design 1.5.3 → 1.5.5

package/dist/workflow/index.js

@@ -1,12 +1,14 @@
-import styled2, { keyframes } from 'styled-components';
+import styled2, { keyframes, css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 // src/components/workflow/WorkflowCard.tsx
 
 // src/theme/tokens.ts
 var tokens = {
   colors: {
+    primary: "#2CB0AB",
+    accent: "#459FB9",
     background: {
       dark: "#1b2230",
       light: "#252d3d"
@@ -15,6 +17,7 @@ var tokens = {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
       tertiary: "#9CA3AF"},
+    success: "#2CB0AB",
     error: "#EF4444",
     warning: "#F59E0B",
     info: "#459FB9",
@@ -23,7 +26,9 @@ var tokens = {
       running: "#459FB9",
       completed: "#2CB0AB",
       failed: "#EF4444",
-      timeout: "#F59E0B"},
+      timeout: "#F59E0B",
+      busy: "#459FB9"
+    },
     surface: {
       overlay: "rgba(255, 255, 255, 0.05)",
       overlayHover: "rgba(255, 255, 255, 0.1)",
@@ -54,7 +59,9 @@ var tokens = {
       semibold: 600},
     lineHeight: {
       tight: 1.25,
-      normal: 1.5}
+      normal: 1.5,
+      relaxed: 1.75
+    }
   },
   spacing: {
     xs: "0.25rem",
@@ -74,8 +81,16 @@ var tokens = {
   transitions: {
     fast: "150ms ease-in-out",
     normal: "250ms ease-in-out"},
+  animation: {
+    pulse: {
+      duration: "2000ms"
+    }
+  },
   zIndex: {
-    modal: 1200}};
+    modal: 1200},
+  breakpoints: {
+    tablet: 1024}
+};
 var WorkflowCard = ({
   id,
   name,
@@ -160,23 +175,1420 @@ WorkflowCard.displayName = "WorkflowCard";
 var Card = styled2.button`
   display: grid;
   gap: ${tokens.spacing.sm};
-  padding: ${tokens.spacing.md};
-  background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.xl};
+  padding: ${tokens.spacing.md};
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.xl};
+  border: 1px solid ${tokens.colors.border.default};
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  font-family: ${tokens.typography.fontFamily.primary};
+  transition: border-color ${tokens.transitions.fast}, background-color ${tokens.transitions.fast};
+
+  &:hover:not(:disabled) {
+    border-color: ${tokens.colors.border.hover};
+    background: ${tokens.colors.background.light};
+  }
+
+  &:active:not(:disabled) {
+    background: ${tokens.colors.surface.overlayActive};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var WorkflowName = styled2.h3`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.base};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+  line-height: ${tokens.typography.lineHeight.tight};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`;
+var Description = styled2.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.tertiary};
+  line-height: ${tokens.typography.lineHeight.normal};
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  min-width: 0;
+`;
+var CardFooter = styled2.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  padding-top: ${tokens.spacing.sm};
+  border-top: 1px solid ${tokens.colors.border.subtle};
+  width: 100%;
+`;
+var IntegrationList = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  flex-shrink: 0;
+`;
+var IntegrationIconWrapper = styled2.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: ${tokens.borderRadius.sm};
+  background: ${tokens.colors.background.light};
+  opacity: ${({ $connected, $optional }) => $connected ? 1 : $optional ? 0.3 : 0.4};
+  position: relative;
+  flex-shrink: 0;
+
+  ${({ $connected, $optional }) => !$connected && `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px dashed ${$optional ? tokens.colors.border.default : tokens.colors.warning};
+      border-radius: ${tokens.borderRadius.sm};
+    }
+  `}
+`;
+var IntegrationIcon = styled2.img`
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+`;
+var Indicators = styled2.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${tokens.spacing.xs};
+  margin-left: auto;
+  min-width: 0;
+`;
+var IndicatorPill = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  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`};
+`;
+var IndicatorDot = styled2.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 = styled2.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.secondary};
+  white-space: nowrap;
+`;
+var readinessVisuals = {
+  ready: {
+    label: "Ready",
+    color: tokens.colors.status.completed,
+    bg: `${tokens.colors.status.completed}1A`,
+    border: `${tokens.colors.status.completed}4D`
+  },
+  "setup-required": {
+    label: "Setup required",
+    color: tokens.colors.warning,
+    bg: `${tokens.colors.warning}1A`,
+    border: `${tokens.colors.warning}4D`
+  },
+  "needs-n8n": {
+    label: "Needs n8n",
+    color: tokens.colors.warning,
+    bg: `${tokens.colors.warning}1A`,
+    border: `${tokens.colors.warning}4D`
+  },
+  paid: {
+    label: "Paid \xB7 free trial",
+    color: tokens.colors.accent,
+    bg: `${tokens.colors.accent}1A`,
+    border: `${tokens.colors.accent}4D`
+  },
+  provisioning: {
+    label: "Provisioning",
+    color: tokens.colors.status.busy,
+    bg: `${tokens.colors.status.busy}1A`,
+    border: `${tokens.colors.status.busy}4D`,
+    animated: true
+  },
+  failed: {
+    label: "Failed",
+    color: tokens.colors.error,
+    bg: `${tokens.colors.error}1A`,
+    border: `${tokens.colors.error}4D`
+  },
+  unavailable: {
+    label: "Unavailable",
+    color: tokens.colors.text.tertiary,
+    bg: "rgba(255, 255, 255, 0.04)",
+    border: "rgba(255, 255, 255, 0.1)"
+  }
+};
+var PlayIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 5.14v13.72L19 12 8 5.14z" }) });
+var PlayIconLarge = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "18",
+    height: "18",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: {
+      marginLeft: 2
+      /* optical centering for triangle */
+    },
+    children: /* @__PURE__ */ jsx("path", { d: "M8 5.14v13.72L19 12 8 5.14z" })
+  }
+);
+var N8nIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "12", r: "2.2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "6", r: "2.2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "2.2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.2 12L15.8 6.8" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.2 12L15.8 17.2" })
+    ]
+  }
+);
+var PaidIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "21" }),
+      /* @__PURE__ */ jsx("path", { d: "M17 6H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })
+    ]
+  }
+);
+var LinkIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+    ]
+  }
+);
+var TrendingIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "12",
+    height: "12",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("polyline", { points: "3 17 9 11 13 15 21 7" }),
+      /* @__PURE__ */ jsx("polyline", { points: "15 7 21 7 21 13" })
+    ]
+  }
+);
+var ChevronIcon = ({ open }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "16",
+    height: "16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: {
+      transform: open ? "rotate(180deg)" : "rotate(0deg)",
+      transition: `transform ${tokens.transitions.fast}`
+    },
+    children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) });
+var ArrowUpIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 19V5" }),
+      /* @__PURE__ */ jsx("path", { d: "M5 12l7-7 7 7" })
+    ]
+  }
+);
+var ArrowDownIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+      /* @__PURE__ */ jsx("path", { d: "M19 12l-7 7-7-7" })
+    ]
+  }
+);
+var SupportIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
+      /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
+      /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "9.17", x2: "18.36", y2: "5.64" }),
+      /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
+    ]
+  }
+);
+var DotIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }) });
+var WorkflowDiscoveryCard = ({
+  id,
+  name,
+  summary,
+  description,
+  category,
+  icon,
+  readiness,
+  statusLabel,
+  integrations = [],
+  optionalIntegrations = [],
+  setupRequirements = [],
+  demoVideoUrl,
+  paidIntegration,
+  usesN8n = false,
+  source,
+  popularity,
+  reservePopularitySpace = true,
+  customIndicators = [],
+  estimatedCostPerRun,
+  defaultExpanded = false,
+  isExpanded: controlledExpanded,
+  onToggleExpanded,
+  onRun,
+  onPlayDemo,
+  onOpenPaidSheet,
+  votes,
+  votesPlacement = "expanded-footer",
+  onVote,
+  onReportIssue,
+  supportPlacement = "metadata",
+  disabled = false,
+  className
+}) => {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expanded = controlledExpanded ?? internalExpanded;
+  const visual = readinessVisuals[readiness];
+  const displayedStatusLabel = statusLabel ?? visual.label;
+  const handleToggleExpanded = useCallback(() => {
+    const next = !expanded;
+    if (controlledExpanded === void 0) {
+      setInternalExpanded(next);
+    }
+    onToggleExpanded?.(id, next);
+  }, [expanded, controlledExpanded, onToggleExpanded, id]);
+  const handleRun = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onRun?.(id);
+    },
+    [onRun, id]
+  );
+  const handlePlayDemo = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (demoVideoUrl) onPlayDemo?.(id, demoVideoUrl);
+    },
+    [onPlayDemo, id, demoVideoUrl]
+  );
+  const handleOpenPaid = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (paidIntegration) onOpenPaidSheet?.(id, paidIntegration);
+    },
+    [onOpenPaidSheet, id, paidIntegration]
+  );
+  const handleVote = useCallback(
+    (e, direction) => {
+      e.stopPropagation();
+      onVote?.(id, direction);
+    },
+    [onVote, id]
+  );
+  const handleReportIssue = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onReportIssue?.(id, name);
+    },
+    [onReportIssue, id, name]
+  );
+  const hasDemo = Boolean(demoVideoUrl);
+  const hasN8n = usesN8n && readiness !== "needs-n8n";
+  const hasPaid = Boolean(paidIntegration) && readiness !== "paid";
+  const hasSource = Boolean(source);
+  const popularityNode = (() => {
+    if (popularity?.trending) {
+      return /* @__PURE__ */ jsxs(PopularityPill, { title: "Trending", children: [
+        /* @__PURE__ */ jsx(TrendingIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: "Trending" })
+      ] });
+    }
+    if (popularity?.rank != null) {
+      return /* @__PURE__ */ jsx(PopularityPill, { title: `Ranked #${popularity.rank}`, children: /* @__PURE__ */ jsxs("span", { children: [
+        "#",
+        popularity.rank
+      ] }) });
+    }
+    if (popularity?.runCount != null) {
+      return /* @__PURE__ */ jsx(PopularityPill, { title: `${popularity.runCount} runs`, children: /* @__PURE__ */ jsxs("span", { children: [
+        formatRunCount(popularity.runCount),
+        " runs"
+      ] }) });
+    }
+    if (reservePopularitySpace) {
+      return /* @__PURE__ */ jsx(PopularitySlotPlaceholder, { "aria-hidden": "true" });
+    }
+    return null;
+  })();
+  const visibleIntegrations = integrations.slice(0, 4);
+  const overflowCount = Math.max(0, integrations.length - 4);
+  return /* @__PURE__ */ jsxs(
+    Card2,
+    {
+      "data-testid": `workflow-discovery-card-${id}`,
+      $disabled: disabled,
+      $expanded: expanded,
+      className,
+      "aria-label": `${name} \u2014 ${displayedStatusLabel}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          HeaderButton,
+          {
+            type: "button",
+            onClick: handleToggleExpanded,
+            disabled,
+            "aria-expanded": expanded,
+            "aria-controls": `workflow-discovery-card-${id}-details`,
+            children: [
+              /* @__PURE__ */ jsxs(HeaderTop, { children: [
+                icon !== void 0 && /* @__PURE__ */ jsx(IconSlot, { "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx(IconImg, { src: icon, alt: "" }) : icon }),
+                /* @__PURE__ */ jsxs(TitleColumn, { children: [
+                  /* @__PURE__ */ jsxs(NameRow, { children: [
+                    /* @__PURE__ */ jsx(Name, { children: name }),
+                    /* @__PURE__ */ jsxs(HeaderTopRight, { children: [
+                      category && /* @__PURE__ */ jsx(CategoryTag, { children: formatCategoryLabel(category) }),
+                      /* @__PURE__ */ jsxs(MetadataIcons, { children: [
+                        hasDemo && /* @__PURE__ */ jsx(
+                          MetadataIcon,
+                          {
+                            "aria-hidden": "true",
+                            title: "Demo video available",
+                            $accent: tokens.colors.primary,
+                            children: /* @__PURE__ */ jsx(PlayIcon, {})
+                          }
+                        ),
+                        hasN8n && /* @__PURE__ */ jsx(
+                          MetadataIcon,
+                          {
+                            "aria-hidden": "true",
+                            title: "Uses n8n",
+                            $accent: tokens.colors.accent,
+                            children: /* @__PURE__ */ jsx(N8nIcon, {})
+                          }
+                        ),
+                        hasPaid && /* @__PURE__ */ jsx(
+                          MetadataIcon,
+                          {
+                            "aria-hidden": "true",
+                            title: "Paid integration",
+                            $accent: tokens.colors.accent,
+                            children: /* @__PURE__ */ jsx(PaidIcon, {})
+                          }
+                        ),
+                        hasSource && /* @__PURE__ */ jsx(
+                          MetadataIcon,
+                          {
+                            "aria-hidden": "true",
+                            title: `Based on ${source?.label}`,
+                            $accent: tokens.colors.text.tertiary,
+                            children: /* @__PURE__ */ jsx(LinkIcon, {})
+                          }
+                        ),
+                        customIndicators.map((ind) => /* @__PURE__ */ jsx(
+                          MetadataIcon,
+                          {
+                            "aria-hidden": "true",
+                            title: ind.tooltip,
+                            $accent: ind.color ?? tokens.colors.text.secondary,
+                            children: ind.icon
+                          },
+                          ind.id
+                        )),
+                        votes && votesPlacement === "metadata" && /* @__PURE__ */ jsxs(
+                          MetadataVoteCompact,
+                          {
+                            $userVote: votes.userVote ?? null,
+                            onClick: (e) => handleVote(e, "up"),
+                            title: `Upvote (${votes.up})`,
+                            type: "button",
+                            "aria-label": `Upvote \u2014 ${votes.up} so far`,
+                            children: [
+                              /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+                              /* @__PURE__ */ jsx("span", { children: formatVoteCount(votes.up - votes.down) })
+                            ]
+                          }
+                        ),
+                        onReportIssue && supportPlacement === "metadata" && /* @__PURE__ */ jsx(
+                          MetadataIconButton,
+                          {
+                            $accent: tokens.colors.text.tertiary,
+                            onClick: handleReportIssue,
+                            title: "Report an issue with this workflow",
+                            type: "button",
+                            "aria-label": "Report an issue",
+                            children: /* @__PURE__ */ jsx(SupportIcon, {})
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(Summary, { children: summary })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(HeaderBottom, { children: [
+                /* @__PURE__ */ jsxs(HeaderBottomContent, { children: [
+                  /* @__PURE__ */ jsxs(
+                    StatusPill,
+                    {
+                      $bg: visual.bg,
+                      $border: visual.border,
+                      $color: visual.color,
+                      $animated: visual.animated,
+                      children: [
+                        /* @__PURE__ */ jsx(StatusDot, { $color: visual.color, $animated: visual.animated, children: /* @__PURE__ */ jsx(DotIcon, {}) }),
+                        displayedStatusLabel
+                      ]
+                    }
+                  ),
+                  visibleIntegrations.length > 0 && /* @__PURE__ */ jsxs(IntegrationRow, { children: [
+                    visibleIntegrations.map((it) => /* @__PURE__ */ jsx(
+                      IntegrationIconSlot,
+                      {
+                        $connected: it.connected !== false,
+                        $optional: !!it.optional,
+                        title: `${it.name}${it.connected === false ? it.optional ? " (optional)" : " (not connected)" : ""}`,
+                        children: typeof it.icon === "string" ? /* @__PURE__ */ jsx(IntegrationImg, { src: it.icon, alt: it.name }) : it.icon
+                      },
+                      it.name
+                    )),
+                    overflowCount > 0 && /* @__PURE__ */ jsxs(OverflowBadge, { title: `${overflowCount} more`, children: [
+                      "+",
+                      overflowCount
+                    ] })
+                  ] }),
+                  popularityNode,
+                  estimatedCostPerRun && /* @__PURE__ */ jsxs(CostPill, { title: `Estimated ${estimatedCostPerRun} per run`, children: [
+                    estimatedCostPerRun,
+                    estimatedCostPerRun.includes("/") ? "" : "/run"
+                  ] }),
+                  votes && votesPlacement === "bottom-row" && /* @__PURE__ */ jsxs(VotePill, { role: "group", "aria-label": "Workflow voting", children: [
+                    /* @__PURE__ */ jsx(
+                      VoteArrowButton,
+                      {
+                        type: "button",
+                        $active: votes.userVote === "up",
+                        $direction: "up",
+                        onClick: (e) => handleVote(e, "up"),
+                        "aria-label": `Upvote \u2014 ${votes.up} so far`,
+                        children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(VoteCount, { children: formatVoteCount(votes.up - votes.down) }),
+                    /* @__PURE__ */ jsx(
+                      VoteArrowButton,
+                      {
+                        type: "button",
+                        $active: votes.userVote === "down",
+                        $direction: "down",
+                        onClick: (e) => handleVote(e, "down"),
+                        "aria-label": `Downvote \u2014 ${votes.down} so far`,
+                        children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(ChevronWrapper, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronIcon, { open: expanded }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailsPanel,
+          {
+            id: `workflow-discovery-card-${id}-details`,
+            $expanded: expanded,
+            "aria-hidden": !expanded,
+            children: /* @__PURE__ */ jsxs(DetailsInner, { children: [
+              /* @__PURE__ */ jsx(DescriptionBlock, { children: description ?? summary }),
+              setupRequirements.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
+                /* @__PURE__ */ jsx(SectionTitle, { children: "Setup required" }),
+                /* @__PURE__ */ jsx(SetupList, { children: setupRequirements.map((req) => /* @__PURE__ */ jsxs(SetupRow, { $done: !!req.done, children: [
+                  /* @__PURE__ */ jsx(SetupStatus, { $done: !!req.done, "aria-hidden": "true", children: req.done ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {}) }),
+                  /* @__PURE__ */ jsx(SetupLabel, { $done: !!req.done, children: req.label }),
+                  !req.done && req.actionLabel && /* @__PURE__ */ jsx(
+                    SetupAction,
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        req.onAction?.();
+                      },
+                      children: req.actionLabel
+                    }
+                  )
+                ] }, req.id)) })
+              ] }),
+              (integrations.length > 0 || optionalIntegrations.length > 0) && /* @__PURE__ */ jsxs(Section, { children: [
+                /* @__PURE__ */ jsx(SectionTitle, { children: "Integrations" }),
+                /* @__PURE__ */ jsxs(IntegrationGroupsRow, { children: [
+                  integrations.length > 0 && /* @__PURE__ */ jsxs(IntegrationGroup, { children: [
+                    /* @__PURE__ */ jsx(IntegrationGroupLabel, { children: "Required" }),
+                    /* @__PURE__ */ jsx(IntegrationRow, { children: integrations.map((it) => /* @__PURE__ */ jsx(
+                      IntegrationIconSlot,
+                      {
+                        $connected: it.connected !== false,
+                        $optional: false,
+                        title: `${it.name}${it.connected === false ? " (not connected)" : ""}`,
+                        children: typeof it.icon === "string" ? /* @__PURE__ */ jsx(IntegrationImg, { src: it.icon, alt: it.name }) : it.icon
+                      },
+                      `req-${it.name}`
+                    )) })
+                  ] }),
+                  optionalIntegrations.length > 0 && /* @__PURE__ */ jsxs(IntegrationGroup, { children: [
+                    /* @__PURE__ */ jsx(IntegrationGroupLabel, { children: "Optional" }),
+                    /* @__PURE__ */ jsx(IntegrationRow, { children: optionalIntegrations.map((it) => /* @__PURE__ */ jsx(
+                      IntegrationIconSlot,
+                      {
+                        $connected: it.connected !== false,
+                        $optional: true,
+                        title: `${it.name} (optional)`,
+                        children: typeof it.icon === "string" ? /* @__PURE__ */ jsx(IntegrationImg, { src: it.icon, alt: it.name }) : it.icon
+                      },
+                      `opt-${it.name}`
+                    )) })
+                  ] })
+                ] })
+              ] }),
+              paidIntegration && /* @__PURE__ */ jsxs(PaidBanner, { children: [
+                /* @__PURE__ */ jsxs(PaidBannerHeader, { children: [
+                  /* @__PURE__ */ jsx(PaidIcon, {}),
+                  /* @__PURE__ */ jsxs(PaidBannerTitle, { children: [
+                    paidIntegration.name,
+                    " requires a paid subscription",
+                    paidIntegration.hasFreeTrial ? " \xB7 free trial available" : ""
+                  ] })
+                ] }),
+                paidIntegration.pricingNote && /* @__PURE__ */ jsx(PaidBannerNote, { children: paidIntegration.pricingNote }),
+                /* @__PURE__ */ jsxs(PaidBannerActions, { children: [
+                  /* @__PURE__ */ jsx(PrimaryPillButton, { type: "button", onClick: handleOpenPaid, children: paidIntegration.hasFreeTrial ? "Start free trial" : "View pricing" }),
+                  paidIntegration.setupVideoUrl && /* @__PURE__ */ jsxs(SecondaryPillButton, { type: "button", onClick: handleOpenPaid, children: [
+                    /* @__PURE__ */ jsx(PlayIcon, {}),
+                    " Watch setup"
+                  ] })
+                ] })
+              ] }),
+              demoVideoUrl && /* @__PURE__ */ jsxs(DemoBanner, { type: "button", onClick: handlePlayDemo, "aria-label": "Play demo video", children: [
+                /* @__PURE__ */ jsx(DemoPlayBubble, { children: /* @__PURE__ */ jsx(PlayIconLarge, {}) }),
+                /* @__PURE__ */ jsxs(DemoText, { children: [
+                  /* @__PURE__ */ jsx(DemoTitle, { children: "Watch the demo" }),
+                  /* @__PURE__ */ jsx(DemoSubtitle, { children: "See this workflow in action before you run it" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Actions, { children: readiness === "unavailable" ? /* @__PURE__ */ jsx(UnavailableNote, { children: "This workflow is not available on your plan." }) : readiness === "failed" ? /* @__PURE__ */ jsx(UnavailableNote, { children: "Provisioning failed. Retry from settings, or contact support." }) : /* @__PURE__ */ jsx(
+                PrimaryActionButton,
+                {
+                  type: "button",
+                  onClick: handleRun,
+                  disabled: disabled || readiness === "provisioning",
+                  children: readiness === "ready" ? "Run workflow" : readiness === "provisioning" ? "Provisioning\u2026" : "Set up to run"
+                }
+              ) }),
+              votes && votesPlacement === "expanded-footer" || onReportIssue && supportPlacement === "expanded-footer" ? /* @__PURE__ */ jsxs(ExpandedFooterActions, { children: [
+                votes && votesPlacement === "expanded-footer" && /* @__PURE__ */ jsxs(VoteBlock, { role: "group", "aria-label": "Was this workflow helpful?", children: [
+                  /* @__PURE__ */ jsx(VoteBlockLabel, { children: "Was this helpful?" }),
+                  /* @__PURE__ */ jsxs(VoteBlockButtons, { children: [
+                    /* @__PURE__ */ jsxs(
+                      VoteBlockButton,
+                      {
+                        type: "button",
+                        $active: votes.userVote === "up",
+                        $direction: "up",
+                        onClick: (e) => handleVote(e, "up"),
+                        "aria-label": `Upvote \u2014 ${votes.up} so far`,
+                        children: [
+                          /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+                          /* @__PURE__ */ jsx("span", { children: formatVoteCount(votes.up) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      VoteBlockButton,
+                      {
+                        type: "button",
+                        $active: votes.userVote === "down",
+                        $direction: "down",
+                        onClick: (e) => handleVote(e, "down"),
+                        "aria-label": `Downvote \u2014 ${votes.down} so far`,
+                        children: [
+                          /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+                          /* @__PURE__ */ jsx("span", { children: formatVoteCount(votes.down) })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                onReportIssue && supportPlacement === "expanded-footer" && /* @__PURE__ */ jsxs(SupportButton, { type: "button", onClick: handleReportIssue, children: [
+                  /* @__PURE__ */ jsx(SupportIcon, {}),
+                  /* @__PURE__ */ jsx("span", { children: "Report an issue" })
+                ] })
+              ] }) : null,
+              source && /* @__PURE__ */ jsxs(SourceFooter, { children: [
+                "Based on",
+                " ",
+                /* @__PURE__ */ jsx(SourceLink, { href: source.url, target: "_blank", rel: "noopener noreferrer", children: source.label })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+WorkflowDiscoveryCard.displayName = "WorkflowDiscoveryCard";
+function formatRunCount(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return String(n);
+}
+function formatCategoryLabel(category) {
+  return category.replace(/_/g, " ");
+}
+function formatVoteCount(n) {
+  const sign = n < 0 ? "-" : "";
+  const abs = Math.abs(n);
+  if (abs >= 1e6) return `${sign}${(abs / 1e6).toFixed(1)}M`;
+  if (abs >= 1e3) return `${sign}${(abs / 1e3).toFixed(1)}K`;
+  return `${sign}${abs}`;
+}
+var pulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+`;
+var expandIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var Card2 = styled2.article`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: ${tokens.colors.background.dark};
+  border: 1px solid
+    ${(p) => p.$expanded ? tokens.colors.border.hover : tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.xl};
+  overflow: hidden;
+  font-family: ${tokens.typography.fontFamily.primary};
+  transition: border-color ${tokens.transitions.fast},
+    background-color ${tokens.transitions.fast};
+  opacity: ${(p) => p.$disabled ? 0.55 : 1};
+
+  &:hover {
+    border-color: ${(p) => p.$disabled ? tokens.colors.border.default : tokens.colors.border.hover};
+  }
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    /* Slightly more breathing room on larger screens */
+    border-radius: ${tokens.borderRadius.xl};
+  }
+`;
+var HeaderButton = styled2.button`
+  all: unset;
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.md};
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    padding: ${tokens.spacing.md} ${tokens.spacing.lg};
+  }
+`;
+var HeaderTop = styled2.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.sm};
+  width: 100%;
+`;
+var IconSlot = styled2.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: ${tokens.colors.background.light};
+  border-radius: ${tokens.borderRadius.md};
+  color: ${tokens.colors.text.secondary};
+`;
+var IconImg = styled2.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+var TitleColumn = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+`;
+var NameRow = styled2.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.sm};
+  min-width: 0;
+`;
+var Name = styled2.h3`
+  flex: 1 1 auto;
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.base};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+  line-height: ${tokens.typography.lineHeight.tight};
+  /* Allow up to 2 lines on narrow screens (e.g. 320px). On wider screens
+     the title will naturally render as 1 line because there's room. We use
+     overflow-wrap (not word-break) so words don't split mid-character —
+     they only break when a single word is too long for one line. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  min-width: 0;
+`;
+var CategoryTag = styled2.span`
+  font-size: 10px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: ${tokens.colors.text.tertiary};
+  background: ${tokens.colors.surface.overlay};
+  padding: 2px ${tokens.spacing.xs};
+  border-radius: ${tokens.borderRadius.sm};
+  flex-shrink: 0;
+`;
+var Summary = styled2.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${tokens.colors.text.secondary};
+  line-height: ${tokens.typography.lineHeight.normal};
+  /* Clamp to 2 lines so mobile shows the gist (instead of cutting at ~25 chars
+     with a single-line ellipsis) while wider screens still mostly render as
+     one line because of the available width. overflow-wrap (not word-break)
+     keeps full words intact unless a single word genuinely doesn't fit. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  min-width: 0;
+`;
+var HeaderTopRight = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  flex-shrink: 0;
+`;
+var MetadataIcons = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  flex-shrink: 0;
+`;
+var MetadataIcon = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => `${p.$accent}1F`};
+  color: ${(p) => p.$accent};
+  flex-shrink: 0;
+`;
+var MetadataIconButton = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => `${p.$accent}1F`};
+  color: ${(p) => p.$accent};
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: background ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${(p) => `${p.$accent}33`};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var MetadataVoteCompact = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => p.$userVote === "up" ? `${tokens.colors.primary}33` : `${tokens.colors.text.tertiary}1F`};
+  color: ${(p) => p.$userVote === "up" ? tokens.colors.primary : tokens.colors.text.secondary};
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  cursor: pointer;
+  transition: background ${tokens.transitions.fast}, color ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${(p) => p.$userVote === "up" ? `${tokens.colors.primary}40` : `${tokens.colors.text.tertiary}33`};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var HeaderBottom = styled2.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${tokens.spacing.sm};
+  width: 100%;
+`;
+var HeaderBottomContent = styled2.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${tokens.spacing.xs};
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+var StatusPill = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: 4px ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => p.$bg};
+  border: 1px solid ${(p) => p.$border};
+  color: ${(p) => p.$color};
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  line-height: 1;
+`;
+var StatusDot = styled2.span`
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+  color: ${(p) => p.$color};
+  ${(p) => p.$animated && css`
+      animation: ${pulse} ${tokens.animation.pulse.duration} ease-in-out infinite;
+    `}
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var IntegrationRow = styled2.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+`;
+var IntegrationIconSlot = styled2.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 5px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: ${tokens.borderRadius.md};
+  opacity: ${(p) => p.$connected ? 1 : p.$optional ? 0.45 : 0.55};
+  flex-shrink: 0;
+
+  ${(p) => !p.$connected && css`
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: ${tokens.borderRadius.md};
+        border: 1px dashed
+          ${p.$optional ? tokens.colors.border.default : tokens.colors.warning};
+        pointer-events: none;
+      }
+    `}
+`;
+var IntegrationImg = styled2.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+var OverflowBadge = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 ${tokens.spacing.xs};
+  background: ${tokens.colors.surface.overlay};
+  border-radius: ${tokens.borderRadius.md};
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.tertiary};
+  flex-shrink: 0;
+`;
+var PopularityPill = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: 3px ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.surface.overlay};
+  border: 1px solid ${tokens.colors.border.subtle};
+  font-size: 10px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.tertiary};
+`;
+var PopularitySlotPlaceholder = styled2.span`
+  display: inline-block;
+  min-width: 48px;
+  height: 1px;
+`;
+var CostPill = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 3px ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.surface.overlay};
+  border: 1px solid ${tokens.colors.border.subtle};
+  font-size: 10px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.tertiary};
+`;
+var VotePill = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px ${tokens.spacing.xs};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.surface.overlay};
+  border: 1px solid ${tokens.colors.border.subtle};
+`;
+var VoteArrowButton = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: ${tokens.borderRadius.full};
+  cursor: pointer;
+  color: ${(p) => p.$active ? p.$direction === "up" ? tokens.colors.primary : tokens.colors.error : tokens.colors.text.tertiary};
+  background: ${(p) => p.$active ? p.$direction === "up" ? `${tokens.colors.primary}26` : `${tokens.colors.error}26` : "transparent"};
+  transition: background ${tokens.transitions.fast}, color ${tokens.transitions.fast};
+
+  &:hover {
+    color: ${(p) => p.$direction === "up" ? tokens.colors.primary : tokens.colors.error};
+    background: ${(p) => p.$direction === "up" ? `${tokens.colors.primary}1F` : `${tokens.colors.error}1F`};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var VoteCount = styled2.span`
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.secondary};
+  min-width: 18px;
+  text-align: center;
+`;
+var ChevronWrapper = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${tokens.colors.text.tertiary};
+`;
+var DetailsPanel = styled2.div`
+  overflow: hidden;
+  max-height: ${(p) => p.$expanded ? "2000px" : "0"};
+  opacity: ${(p) => p.$expanded ? 1 : 0};
+  transition: max-height ${tokens.transitions.normal},
+    opacity ${tokens.transitions.fast};
+
+  ${(p) => p.$expanded && css`
+      animation: ${expandIn} ${tokens.transitions.fast};
+    `}
+`;
+var DetailsInner = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.md};
+  padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
+  border-top: 1px solid ${tokens.colors.border.subtle};
+  padding-top: ${tokens.spacing.md};
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    padding: ${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg};
+    padding-top: ${tokens.spacing.md};
+  }
+`;
+var DescriptionBlock = styled2.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.relaxed};
+  color: ${tokens.colors.text.secondary};
+`;
+var Section = styled2.section`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+`;
+var SectionTitle = styled2.h4`
+  margin: 0;
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: ${tokens.colors.text.tertiary};
+`;
+var SetupList = styled2.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+`;
+var SetupRow = styled2.li`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  background: ${tokens.colors.surface.subtle};
+  border-radius: ${tokens.borderRadius.md};
+`;
+var SetupStatus = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${(p) => p.$done ? `${tokens.colors.success}1A` : tokens.colors.surface.overlay};
+  color: ${(p) => p.$done ? tokens.colors.success : tokens.colors.text.tertiary};
+  flex-shrink: 0;
+`;
+var SetupLabel = styled2.span`
+  flex: 1;
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${(p) => p.$done ? tokens.colors.text.tertiary : tokens.colors.text.primary};
+  text-decoration: ${(p) => p.$done ? "line-through" : "none"};
+`;
+var SetupAction = styled2.button`
+  all: unset;
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.primary};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.sm};
+  cursor: pointer;
+  transition: background ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${tokens.colors.surface.overlay};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var IntegrationGroupsRow = styled2.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: ${tokens.spacing.md} ${tokens.spacing.lg};
+  width: 100%;
+`;
+var IntegrationGroup = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+`;
+var IntegrationGroupLabel = styled2.span`
+  font-size: 10px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: ${tokens.colors.text.tertiary};
+`;
+var PaidBanner = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background: ${tokens.colors.accent}14;
+  border: 1px solid ${tokens.colors.accent}33;
+  border-radius: ${tokens.borderRadius.md};
+`;
+var PaidBannerHeader = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  color: ${tokens.colors.accent};
+`;
+var PaidBannerTitle = styled2.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.primary};
+`;
+var PaidBannerNote = styled2.p`
+  margin: 0;
+  font-size: 11px;
+  color: ${tokens.colors.text.tertiary};
+`;
+var PaidBannerActions = styled2.div`
+  display: flex;
+  gap: ${tokens.spacing.xs};
+  flex-wrap: wrap;
+`;
+var PrimaryPillButton = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.md};
+  background: ${tokens.colors.accent};
+  color: #fff;
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  border-radius: ${tokens.borderRadius.full};
+  cursor: pointer;
+  transition: opacity ${tokens.transitions.fast};
+
+  &:hover {
+    opacity: 0.92;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var SecondaryPillButton = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.md};
+  background: transparent;
+  color: ${tokens.colors.text.secondary};
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
   border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.full};
   cursor: pointer;
-  text-align: left;
+  transition: background ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${tokens.colors.surface.overlay};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var DemoBanner = styled2.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.md};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background: ${tokens.colors.primary}14;
+  border: 1px solid ${tokens.colors.primary}33;
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  transition: background ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${tokens.colors.primary}1F;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
+`;
+var DemoPlayBubble = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.primary};
+  color: #fff;
+  flex-shrink: 0;
+`;
+var DemoText = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+var DemoTitle = styled2.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+`;
+var DemoSubtitle = styled2.span`
+  font-size: 11px;
+  color: ${tokens.colors.text.tertiary};
+`;
+var Actions = styled2.div`
+  display: flex;
+  justify-content: stretch;
   width: 100%;
-  font-family: ${tokens.typography.fontFamily.primary};
-  transition: border-color ${tokens.transitions.fast}, background-color ${tokens.transitions.fast};
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    justify-content: flex-end;
+  }
+`;
+var PrimaryActionButton = styled2.button`
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${tokens.spacing.sm} ${tokens.spacing.lg};
+  background: ${tokens.colors.primary};
+  color: #fff;
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  width: 100%;
+  text-align: center;
+  transition: opacity ${tokens.transitions.fast},
+    transform ${tokens.transitions.fast};
 
   &:hover:not(:disabled) {
-    border-color: ${tokens.colors.border.hover};
-    background: ${tokens.colors.background.light};
+    opacity: 0.92;
   }
 
   &:active:not(:disabled) {
-    background: ${tokens.colors.surface.overlayActive};
+    transform: translateY(1px);
   }
 
   &:focus-visible {
@@ -185,103 +1597,109 @@ var Card = styled2.button`
   }
 
   &:disabled {
+    opacity: 0.55;
     cursor: not-allowed;
   }
+
+  @media (min-width: ${tokens.breakpoints.tablet}px) {
+    width: auto;
+    min-width: 160px;
+  }
 `;
-var WorkflowName = styled2.h3`
-  margin: 0;
-  font-size: ${tokens.typography.fontSize.base};
-  font-weight: ${tokens.typography.fontWeight.semibold};
-  color: ${tokens.colors.text.primary};
-  line-height: ${tokens.typography.lineHeight.tight};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-`;
-var Description = styled2.p`
+var UnavailableNote = styled2.p`
   margin: 0;
-  font-size: ${tokens.typography.fontSize.sm};
+  font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
-  line-height: ${tokens.typography.lineHeight.normal};
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  word-break: break-word;
-  min-width: 0;
 `;
-var CardFooter = styled2.div`
+var ExpandedFooterActions = styled2.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: space-between;
   gap: ${tokens.spacing.sm};
-  padding-top: ${tokens.spacing.sm};
+  padding-top: ${tokens.spacing.xs};
   border-top: 1px solid ${tokens.colors.border.subtle};
-  width: 100%;
 `;
-var IntegrationList = styled2.div`
-  display: flex;
+var VoteBlock = styled2.div`
+  display: inline-flex;
   align-items: center;
-  gap: ${tokens.spacing.xs};
-  flex-shrink: 0;
+  gap: ${tokens.spacing.sm};
 `;
-var IntegrationIconWrapper = styled2.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: ${tokens.borderRadius.sm};
-  background: ${tokens.colors.background.light};
-  opacity: ${({ $connected, $optional }) => $connected ? 1 : $optional ? 0.3 : 0.4};
-  position: relative;
-  flex-shrink: 0;
-
-  ${({ $connected, $optional }) => !$connected && `
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border: 1px dashed ${$optional ? tokens.colors.border.default : tokens.colors.warning};
-      border-radius: ${tokens.borderRadius.sm};
-    }
-  `}
+var VoteBlockLabel = styled2.span`
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.tertiary};
 `;
-var IntegrationIcon = styled2.img`
-  width: 16px;
-  height: 16px;
-  object-fit: contain;
+var VoteBlockButtons = styled2.div`
+  display: inline-flex;
+  gap: ${tokens.spacing.xs};
 `;
-var Indicators = styled2.div`
-  display: flex;
+var VoteBlockButton = styled2.button`
+  all: unset;
+  display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   gap: ${tokens.spacing.xs};
-  margin-left: auto;
-  min-width: 0;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.full};
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  cursor: pointer;
+  color: ${(p) => p.$active ? p.$direction === "up" ? tokens.colors.primary : tokens.colors.error : tokens.colors.text.secondary};
+  background: ${(p) => p.$active ? p.$direction === "up" ? `${tokens.colors.primary}26` : `${tokens.colors.error}26` : tokens.colors.surface.overlay};
+  border: 1px solid
+    ${(p) => p.$active ? p.$direction === "up" ? `${tokens.colors.primary}66` : `${tokens.colors.error}66` : tokens.colors.border.subtle};
+  transition: background ${tokens.transitions.fast}, color ${tokens.transitions.fast},
+    border-color ${tokens.transitions.fast};
+
+  &:hover {
+    color: ${(p) => p.$direction === "up" ? tokens.colors.primary : tokens.colors.error};
+    background: ${(p) => p.$direction === "up" ? `${tokens.colors.primary}1F` : `${tokens.colors.error}1F`};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
 `;
-var IndicatorPill = styled2.span`
+var SupportButton = styled2.button`
+  all: unset;
   display: inline-flex;
   align-items: center;
   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`};
+  font-size: 11px;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.secondary};
+  cursor: pointer;
+  transition: color ${tokens.transitions.fast},
+    background ${tokens.transitions.fast};
+
+  &:hover {
+    color: ${tokens.colors.text.primary};
+    background: ${tokens.colors.surface.overlay};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
+  }
 `;
-var IndicatorDot = styled2.span`
-  width: 6px;
-  height: 6px;
-  border-radius: ${tokens.borderRadius.full};
-  background: ${({ $variant }) => $variant === "warning" ? tokens.colors.warning : tokens.colors.info};
-  flex-shrink: 0;
+var SourceFooter = styled2.div`
+  margin-top: ${tokens.spacing.xs};
+  font-size: 11px;
+  color: ${tokens.colors.text.tertiary};
 `;
-var IndicatorText = styled2.span`
-  font-size: ${tokens.typography.fontSize.xs};
-  font-weight: ${tokens.typography.fontWeight.medium};
+var SourceLink = styled2.a`
   color: ${tokens.colors.text.secondary};
-  white-space: nowrap;
+  text-decoration: underline;
+  text-decoration-color: ${tokens.colors.border.default};
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: ${tokens.colors.text.primary};
+    text-decoration-color: ${tokens.colors.border.hover};
+  }
 `;
 var severityColors = {
   error: tokens.colors.error,
@@ -406,7 +1824,7 @@ var StackTrace = styled2.pre`
   word-break: break-word;
   overflow-x: auto;
 `;
-var Actions = styled2.div`
+var Actions2 = styled2.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.md};
@@ -505,7 +1923,7 @@ var InfoIcon = () => /* @__PURE__ */ jsx(
   }
 );
 var CloseIcon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
-var ChevronIcon = () => /* @__PURE__ */ jsx(
+var ChevronIcon2 = () => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -576,14 +1994,14 @@ var WorkflowErrorAlert = ({
               onToggle: (e) => setDetailsOpen(e.target.open),
               children: [
                 /* @__PURE__ */ jsxs("summary", { children: [
-                  /* @__PURE__ */ jsx(DetailsIcon, { open: detailsOpen, children: /* @__PURE__ */ jsx(ChevronIcon, {}) }),
+                  /* @__PURE__ */ jsx(DetailsIcon, { open: detailsOpen, children: /* @__PURE__ */ jsx(ChevronIcon2, {}) }),
                   "Show Details"
                 ] }),
                 /* @__PURE__ */ jsx(StackTrace, { children: stackTrace || (typeof error === "object" ? error.stack : "") })
               ]
             }
           ),
-          (retryable || onDismiss) && /* @__PURE__ */ jsxs(Actions, { children: [
+          (retryable || onDismiss) && /* @__PURE__ */ jsxs(Actions2, { children: [
             retryable && onRetry && /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onRetry, children: "Retry" }),
             onDismiss && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleDismiss, children: "Dismiss" })
           ] })
@@ -892,7 +2310,7 @@ var Title2 = styled2.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var Actions2 = styled2.div`
+var Actions3 = styled2.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
@@ -1012,7 +2430,7 @@ var EmptyState = styled2.div`
 `;
 var DownloadIcon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) });
 var CopyIcon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) });
-var ChevronIcon2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }) });
+var ChevronIcon3 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }) });
 var WorkflowResultPanel = ({
   outputData,
   variant = "json",
@@ -1073,9 +2491,9 @@ var WorkflowResultPanel = ({
         /* @__PURE__ */ jsxs(Header2, { collapsible, onClick: handleToggle, children: [
           /* @__PURE__ */ jsxs(Title2, { children: [
             title,
-            collapsible && /* @__PURE__ */ jsx(CollapseIcon, { expanded, children: /* @__PURE__ */ jsx(ChevronIcon2, {}) })
+            collapsible && /* @__PURE__ */ jsx(CollapseIcon, { expanded, children: /* @__PURE__ */ jsx(ChevronIcon3, {}) })
           ] }),
-          /* @__PURE__ */ jsxs(Actions2, { onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs(Actions3, { onClick: (e) => e.stopPropagation(), children: [
             onCopy && /* @__PURE__ */ jsx(IconButton, { onClick: onCopy, title: "Copy to clipboard", "aria-label": "Copy to clipboard", children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
             onDownload && /* @__PURE__ */ jsx(IconButton, { onClick: onDownload, title: "Download", "aria-label": "Download results", children: /* @__PURE__ */ jsx(DownloadIcon, {}) })
           ] })
@@ -1094,7 +2512,7 @@ var spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse = keyframes`
+var pulse2 = keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -1172,7 +2590,7 @@ var IconContainer2 = styled2.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse;
+    if (props.$status === "pending") return pulse2;
   }
   return "none";
 }}
@@ -1301,6 +2719,6 @@ var WorkflowStatusBadge = ({
 };
 WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
 
-export { WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge };
+export { WorkflowCard, WorkflowDiscoveryCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map