@agentiffai/design 0.1.7 → 0.1.9

package/dist/workflow/index.cjs

@@ -1,210 +1,597 @@
 'use strict';
 
-var styled4 = require('styled-components');
+var styled2 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled4__default = /*#__PURE__*/_interopDefault(styled4);
+var styled2__default = /*#__PURE__*/_interopDefault(styled2);
 
-// src/components/workflow/WorkflowStatusBadge.tsx
-var spin = styled4.keyframes`
-  from {
-    transform: rotate(0deg);
+// src/components/workflow/WorkflowCard.tsx
+
+// src/theme/tokens.ts
+var tokens = {
+  colors: {
+    // Sea Green (additional brand color)
+    // Backgrounds - dark theme optimized
+    background: {
+      // Discord gray (preserved)
+      dark: "#1b2230",
+      // Discord surface gray (preserved)
+      light: "#252d3d"
+      // Discord border gray (preserved)
+    },
+    // Text hierarchy
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#B4B8C5",
+      tertiary: "#6B7280"},
+    // Teal (brand aligned)
+    error: "#EF4444",
+    warning: "#F59E0B",
+    info: "#459FB9",
+    // Sky Blue (brand aligned)
+    // Status colors (for workflow/SSE events)
+    status: {
+      pending: "#6B7280",
+      running: "#459FB9",
+      // Sky Blue (brand aligned)
+      completed: "#2CB0AB",
+      // Teal (brand aligned)
+      failed: "#EF4444",
+      timeout: "#F59E0B"},
+    // Surface variants (for overlays, cards, panels)
+    surface: {
+      overlay: "rgba(255, 255, 255, 0.05)",
+      overlayHover: "rgba(255, 255, 255, 0.1)",
+      overlayActive: "rgba(255, 255, 255, 0.15)",
+      subtle: "rgba(255, 255, 255, 0.02)"},
+    // UI Element colors
+    border: {
+      default: "rgba(255, 255, 255, 0.1)",
+      subtle: "rgba(255, 255, 255, 0.05)",
+      hover: "rgba(255, 255, 255, 0.2)",
+      focus: "#2CB0AB"},
+    // Scrollbar colors
+    scrollbar: {
+      track: "transparent",
+      thumb: "rgba(255, 255, 255, 0.2)",
+      thumbHover: "rgba(255, 255, 255, 0.3)"
+    },
+    // Overlays and backdrops
+    overlay: "rgba(0, 0, 0, 0.5)"},
+  typography: {
+    fontFamily: {
+      primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif",
+      monospace: "'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace"
+    },
+    fontSize: {
+      xs: "0.75rem",
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      base: "1rem"},
+    fontWeight: {
+      medium: 500,
+      semibold: 600},
+    lineHeight: {
+      tight: 1.25,
+      normal: 1.5}
+  },
+  spacing: {
+    xs: "0.25rem",
+    // 4px
+    sm: "0.5rem",
+    // 8px
+    md: "1rem",
+    // 16px
+    lg: "1.5rem",
+    // 24px
+    xl: "2rem"},
+  borderRadius: {
+    sm: "0.25rem",
+    // 4px
+    md: "0.5rem",
+    // 8px
+    lg: "0.75rem",
+    // 24px
+    full: "9999px"
+    // Fully rounded
+  },
+  shadows: {
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"},
+  transitions: {
+    fast: "150ms ease-in-out",
+    normal: "250ms ease-in-out"},
+  zIndex: {
+    modal: 1200}};
+var WorkflowCard = ({
+  id,
+  name,
+  description,
+  integrations = [],
+  requiresInput = false,
+  onClick,
+  disabled = false,
+  className
+}) => {
+  const missingCount = integrations.filter((i) => i.connected === false).length;
+  const hasFooter = integrations.length > 0 || requiresInput;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      "data-testid": `workflow-card-${id}`,
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      className,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(WorkflowName, { "data-testid": "workflow-card-name", children: name }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
+        hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(CardFooter, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IntegrationList, { children: integrations.map((integration) => /* @__PURE__ */ jsxRuntime.jsx(
+            IntegrationIconWrapper,
+            {
+              $connected: integration.connected !== false,
+              title: `${integration.name}${integration.connected === false ? " (not connected)" : ""}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                IntegrationIcon,
+                {
+                  src: integration.icon,
+                  alt: integration.name
+                }
+              )
+            },
+            integration.name
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Indicators, { children: [
+            missingCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+              IndicatorPill,
+              {
+                $variant: "warning",
+                title: `${missingCount} integration${missingCount > 1 ? "s" : ""} not connected`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IndicatorDot, { $variant: "warning" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(IndicatorText, { children: [
+                    missingCount,
+                    " missing"
+                  ] })
+                ]
+              }
+            ),
+            requiresInput && /* @__PURE__ */ jsxRuntime.jsxs(IndicatorPill, { $variant: "info", title: "Requires input", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IndicatorDot, { $variant: "info" }),
+              /* @__PURE__ */ jsxRuntime.jsx(IndicatorText, { children: "Input required" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+WorkflowCard.displayName = "WorkflowCard";
+var Card = styled2__default.default.button`
+  display: grid;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.md};
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  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};
   }
-  to {
-    transform: rotate(360deg);
+
+  &:active:not(:disabled) {
+    background: ${tokens.colors.surface.overlayActive};
   }
-`;
-var pulse = styled4.keyframes`
-  0%, 100% {
-    opacity: 1;
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
   }
-  50% {
+
+  &:disabled {
     opacity: 0.5;
+    cursor: not-allowed;
   }
 `;
-var BadgeContainer = styled4__default.default.div`
+var WorkflowName = styled2__default.default.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};
+`;
+var Description = styled2__default.default.p`
+  margin: 0;
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.tertiary};
+  line-height: ${tokens.typography.lineHeight.normal};
+`;
+var CardFooter = styled2__default.default.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};
+`;
+var IntegrationList = styled2__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+`;
+var IntegrationIconWrapper = styled2__default.default.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 }) => $connected ? 1 : 0.4};
+  position: relative;
+
+  ${({ $connected }) => !$connected && `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px dashed ${tokens.colors.warning};
+      border-radius: ${tokens.borderRadius.sm};
+    }
+  `}
+`;
+var IntegrationIcon = styled2__default.default.img`
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+`;
+var Indicators = styled2__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  margin-left: auto;
+`;
+var IndicatorPill = styled2__default.default.span`
   display: inline-flex;
   align-items: center;
-  gap: ${(props) => {
-  switch (props.$size) {
-    case "sm":
-      return "4px";
-    case "lg":
-      return "8px";
-    case "md":
-    default:
-      return "6px";
-  }
+  gap: 6px;
+  padding: 4px 10px;
+  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__default.default.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__default.default.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.secondary};
+  white-space: nowrap;
+`;
+var severityColors = {
+  error: tokens.colors.error,
+  warning: tokens.colors.warning,
+  info: tokens.colors.info
+};
+var AlertContainer = styled2__default.default.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => {
+  const alpha = props.variant === "modal" ? "26" : props.variant === "banner" ? "1a" : "0d";
+  return `${severityColors[props.severity]}${alpha}`;
 }};
-  padding: ${(props) => {
-  switch (props.$size) {
-    case "sm":
-      return "4px 8px";
-    case "lg":
-      return "8px 16px";
-    case "md":
-    default:
-      return "6px 12px";
-  }
+  border: 1px solid ${(props) => {
+  const alpha = props.variant === "modal" ? "66" : "4d";
+  return `${severityColors[props.severity]}${alpha}`;
 }};
-  background-color: ${(props) => {
-  switch (props.$status) {
-    case "pending":
-      return "rgba(107, 114, 128, 0.1)";
-    // Gray
-    case "running":
-      return "rgba(59, 130, 246, 0.1)";
-    // Blue
-    case "completed":
-      return "rgba(16, 185, 129, 0.1)";
-    // Green
-    case "failed":
-      return "rgba(239, 68, 68, 0.1)";
-    // Red
-    case "timeout":
-      return "rgba(245, 158, 11, 0.1)";
+  border-radius: ${(props) => props.variant === "banner" ? "0" : tokens.borderRadius.md};
+  padding: ${(props) => props.variant === "modal" ? tokens.spacing.lg : tokens.spacing.md};
+  margin: ${(props) => props.variant === "banner" ? "0" : `${tokens.spacing.sm} 0`};
+  width: ${(props) => props.variant === "modal" ? "auto" : "100%"};
+  max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
+  font-family: ${tokens.typography.fontFamily.primary};
+`;
+var ModalOverlay = styled2__default.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${tokens.colors.overlay};
+  display: ${(props) => props.isOpen ? "flex" : "none"};
+  align-items: center;
+  justify-content: center;
+  z-index: ${tokens.zIndex.modal};
+  padding: ${tokens.spacing.lg};
+`;
+var ModalContent = styled2__default.default.div`
+  background-color: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  max-width: 500px;
+  width: 100%;
+  box-shadow: ${tokens.shadows.xl};
+`;
+var Header = styled2__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.md};
+`;
+var IconContainer = styled2__default.default.div`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: ${(props) => severityColors[props.severity]};
+`;
+var Content = styled2__default.default.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+`;
+var Title = styled2__default.default.div`
+  font-size: ${tokens.typography.fontSize.base};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+  line-height: ${tokens.typography.lineHeight.tight};
+`;
+var ErrorMessage = styled2__default.default.div`
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.normal};
+  color: ${tokens.colors.text.secondary};
+`;
+var ErrorCode = styled2__default.default.div`
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${tokens.colors.text.secondary};
+  font-family: ${tokens.typography.fontFamily.monospace};
+  margin-top: ${tokens.spacing.xs};
+`;
+var Timestamp = styled2__default.default.div`
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${tokens.colors.text.tertiary};
+  margin-top: ${tokens.spacing.xs};
+`;
+var Details = styled2__default.default.details`
+  margin-top: ${tokens.spacing.md};
+  cursor: pointer;
+
+  summary {
+    font-size: ${tokens.typography.fontSize.sm};
+    font-weight: ${tokens.typography.fontWeight.medium};
+    color: ${tokens.colors.text.secondary};
+    user-select: none;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: ${tokens.spacing.xs};
+
+    &:hover {
+      color: ${tokens.colors.text.primary};
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
-}};
+`;
+var DetailsIcon = styled2__default.default.span`
+  display: inline-block;
+  transition: transform ${tokens.transitions.fast};
+  transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
+`;
+var StackTrace = styled2__default.default.pre`
+  margin: ${tokens.spacing.sm} 0 0 0;
+  padding: ${tokens.spacing.md};
+  background-color: ${tokens.colors.surface.subtle};
+  border-radius: ${tokens.borderRadius.sm};
+  font-family: ${tokens.typography.fontFamily.monospace};
+  font-size: ${tokens.typography.fontSize.xs};
+  line-height: ${tokens.typography.lineHeight.normal};
+  color: ${tokens.colors.text.secondary};
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+`;
+var Actions = styled2__default.default.div`
+  display: flex;
+  gap: ${tokens.spacing.sm};
+  margin-top: ${tokens.spacing.md};
+`;
+var Button = styled2__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${(props) => props.variant === "primary" ? tokens.colors.text.primary : tokens.colors.text.secondary};
+  background: ${(props) => props.variant === "primary" ? tokens.colors.error : tokens.colors.surface.overlay};
   border: 1px solid
-    ${(props) => {
-  switch (props.$status) {
-    case "pending":
-      return "rgba(107, 114, 128, 0.3)";
-    case "running":
-      return "rgba(59, 130, 246, 0.3)";
-    case "completed":
-      return "rgba(16, 185, 129, 0.3)";
-    case "failed":
-      return "rgba(239, 68, 68, 0.3)";
-    case "timeout":
-      return "rgba(245, 158, 11, 0.3)";
-  }
-}};
-  border-radius: ${(props) => {
-  switch (props.$size) {
-    case "sm":
-      return "4px";
-    case "lg":
-      return "8px";
-    case "md":
-    default:
-      return "6px";
+    ${(props) => props.variant === "primary" ? tokens.colors.error : tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  transition: all ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${(props) => props.variant === "primary" ? tokens.colors.error : tokens.colors.surface.overlayHover};
+    border-color: ${(props) => props.variant === "primary" ? tokens.colors.error : tokens.colors.border.hover};
   }
-}};
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: ${(props) => {
-  switch (props.$size) {
-    case "sm":
-      return "11px";
-    case "lg":
-      return "15px";
-    case "md":
-    default:
-      return "13px";
+
+  &:active {
+    transform: scale(0.98);
   }
-}};
-  font-weight: 500;
-  color: ${(props) => {
-  switch (props.$status) {
-    case "pending":
-      return "#6B7280";
-    case "running":
-      return "#3B82F6";
-    case "completed":
-      return "#10B981";
-    case "failed":
-      return "#EF4444";
-    case "timeout":
-      return "#F59E0B";
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
-}};
-  line-height: 1.4;
 `;
-var IconContainer = styled4__default.default.div`
+var CloseButton = styled2__default.default.button`
+  position: absolute;
+  top: ${tokens.spacing.md};
+  right: ${tokens.spacing.md};
+  width: 32px;
+  height: 32px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  animation: ${(props) => {
-  if (props.$animated) {
-    if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse;
+  background: transparent;
+  border: none;
+  color: ${tokens.colors.text.secondary};
+  cursor: pointer;
+  border-radius: ${tokens.borderRadius.sm};
+  transition: all ${tokens.transitions.fast};
+
+  &:hover {
+    background: ${tokens.colors.surface.overlayHover};
+    color: ${tokens.colors.text.primary};
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
   }
-  return "none";
-}}
-    ${(props) => props.$status === "running" ? "1s" : "2s"} linear infinite;
-`;
-var PendingIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" }) });
-var RunningIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z", opacity: "0.3" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-] });
-var CompletedIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) });
-var FailedIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }) });
-var TimeoutIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
-var Label = styled4__default.default.span`
-  white-space: nowrap;
 `;
-var getDefaultLabel = (status) => {
-  switch (status) {
-    case "pending":
-      return "Pending";
-    case "running":
-      return "Running";
-    case "completed":
-      return "Completed";
-    case "failed":
-      return "Failed";
-    case "timeout":
-      return "Timeout";
+var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "24",
+    height: "24",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
   }
-};
-var getStatusIcon = (status) => {
-  switch (status) {
-    case "pending":
-      return /* @__PURE__ */ jsxRuntime.jsx(PendingIcon, {});
-    case "running":
-      return /* @__PURE__ */ jsxRuntime.jsx(RunningIcon, {});
-    case "completed":
-      return /* @__PURE__ */ jsxRuntime.jsx(CompletedIcon, {});
-    case "failed":
-      return /* @__PURE__ */ jsxRuntime.jsx(FailedIcon, {});
-    case "timeout":
-      return /* @__PURE__ */ jsxRuntime.jsx(TimeoutIcon, {});
+);
+var WarningIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "24",
+    height: "24",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
   }
-};
-var WorkflowStatusBadge = ({
-  status,
-  size = "md",
-  showIcon = true,
-  showLabel = true,
-  animated = true,
-  label,
+);
+var InfoIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "24",
+    height: "24",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" })
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })
+  }
+);
+var WorkflowErrorAlert = ({
+  error,
+  errorCode,
+  timestamp,
+  variant = "inline",
+  severity = "error",
+  retryable = false,
+  onRetry,
+  onDismiss,
+  showDetails = false,
+  stackTrace,
+  title,
   className
 }) => {
-  const displayLabel = label || getDefaultLabel(status);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    BadgeContainer,
-    {
-      $status: status,
-      $size: size,
-      className,
-      role: "status",
-      "aria-label": displayLabel,
-      children: [
-        showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { $animated: animated, $status: status, "aria-hidden": "true", children: getStatusIcon(status) }),
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: displayLabel })
-      ]
+  const [detailsOpen, setDetailsOpen] = react.useState(false);
+  const [isModalOpen, setIsModalOpen] = react.useState(variant === "modal");
+  const errorMessage = typeof error === "string" ? error : error.message;
+  const defaultTitle = severity === "error" ? "Workflow Error" : severity === "warning" ? "Warning" : "Information";
+  const displayTitle = title || defaultTitle;
+  const handleDismiss = () => {
+    if (variant === "modal") {
+      setIsModalOpen(false);
     }
-  );
+    onDismiss?.();
+  };
+  const getIcon = () => {
+    switch (severity) {
+      case "error":
+        return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {});
+      case "warning":
+        return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {});
+      case "info":
+        return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {});
+    }
+  };
+  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { severity, "aria-hidden": "true", children: getIcon() }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title, { children: displayTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: errorMessage }),
+      errorCode && /* @__PURE__ */ jsxRuntime.jsxs(ErrorCode, { children: [
+        "Error Code: ",
+        errorCode
+      ] }),
+      timestamp && /* @__PURE__ */ jsxRuntime.jsx(Timestamp, { children: new Date(timestamp).toLocaleString() }),
+      showDetails && (stackTrace || typeof error === "object" && error.stack) && /* @__PURE__ */ jsxRuntime.jsxs(
+        Details,
+        {
+          open: detailsOpen,
+          onToggle: (e) => setDetailsOpen(e.target.open),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("summary", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DetailsIcon, { open: detailsOpen, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {}) }),
+              "Show Details"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(StackTrace, { children: stackTrace || (typeof error === "object" ? error.stack : "") })
+          ]
+        }
+      ),
+      (retryable || onDismiss) && /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
+        retryable && onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: onRetry, children: "Retry" }),
+        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: handleDismiss, children: "Dismiss" })
+      ] })
+    ] }),
+    variant !== "modal" && onDismiss && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleDismiss, "aria-label": "Dismiss alert", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+  ] }) });
+  if (variant === "modal") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen: isModalOpen, onClick: handleDismiss, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { onClick: (e) => e.stopPropagation(), children: [
+      alertContent,
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleDismiss, "aria-label": "Close modal", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+    ] }) });
+  }
+  return alertContent;
 };
-WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
-var indeterminate = styled4.keyframes`
+WorkflowErrorAlert.displayName = "WorkflowErrorAlert";
+var indeterminate = styled2.keyframes`
   0% {
     transform: translateX(-100%);
   }
@@ -212,7 +599,7 @@ var indeterminate = styled4.keyframes`
     transform: translateX(400%);
   }
 `;
-var rotate = styled4.keyframes`
+var rotate = styled2.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -220,106 +607,95 @@ var rotate = styled4.keyframes`
     transform: rotate(360deg);
   }
 `;
-var Container = styled4__default.default.div`
+var statusColors = {
+  pending: tokens.colors.status.pending,
+  running: tokens.colors.status.running,
+  completed: tokens.colors.status.completed,
+  failed: tokens.colors.status.failed,
+  timeout: tokens.colors.status.timeout
+};
+var Container = styled2__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: ${tokens.spacing.sm};
   width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ProgressMessage = styled4__default.default.div`
+var ProgressMessage = styled2__default.default.div`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
-      return "12px";
+      return tokens.typography.fontSize.xs;
     case "lg":
-      return "16px";
+      return tokens.typography.fontSize.base;
     case "md":
     default:
-      return "14px";
+      return tokens.typography.fontSize.sm;
   }
 }};
-  color: #9CA3AF;
-  line-height: 1.5;
+  color: ${tokens.colors.text.secondary};
+  line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ProgressInfo = styled4__default.default.div`
+var ProgressInfo = styled2__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: ${tokens.spacing.xs};
 `;
-var PercentageText = styled4__default.default.span`
+var PercentageText = styled2__default.default.span`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
-      return "11px";
+      return tokens.typography.fontSize.xs;
     case "lg":
-      return "15px";
+      return tokens.typography.fontSize.base;
     case "md":
     default:
-      return "13px";
+      return tokens.typography.fontSize.sm;
   }
 }};
-  font-weight: 500;
-  color: #FFFFFF;
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.primary};
 `;
-var LinearTrack = styled4__default.default.div`
+var LinearTrack = styled2__default.default.div`
   position: relative;
   width: 100%;
   height: ${(props) => {
   switch (props.size) {
     case "sm":
-      return "4px";
+      return tokens.spacing.xs;
     case "lg":
-      return "8px";
+      return tokens.spacing.sm;
     case "md":
     default:
       return "6px";
   }
 }};
-  background-color: rgba(255, 255, 255, 0.1);
-  border-radius: 9999px;
+  background-color: ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var LinearFill = styled4__default.default.div`
+var LinearFill = styled2__default.default.div`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: ${(props) => props.indeterminate ? "25%" : `${props.progress}%`};
-  background-color: ${(props) => {
-  switch (props.status) {
-    case "pending":
-      return "#6B7280";
-    // Gray
-    case "running":
-      return "#3B82F6";
-    // Blue
-    case "completed":
-      return "#10B981";
-    // Green
-    case "failed":
-      return "#EF4444";
-    // Red
-    case "timeout":
-      return "#F59E0B";
-  }
-}};
-  border-radius: 9999px;
-  transition: ${(props) => props.animated && !props.indeterminate ? "width 0.3s ease-out" : "none"};
+  background-color: ${(props) => statusColors[props.status]};
+  border-radius: ${tokens.borderRadius.full};
+  transition: ${(props) => props.animated && !props.indeterminate ? `width ${tokens.transitions.normal}` : "none"};
   animation: ${(props) => props.indeterminate ? indeterminate : "none"} 1.5s ease-in-out infinite;
 `;
-var CircularContainer = styled4__default.default.div`
+var CircularContainer = styled2__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CircularSvg = styled4__default.default.svg`
+var CircularSvg = styled2__default.default.svg`
   width: ${(props) => {
   switch (props.size) {
     case "sm":
-      return "40px";
+      return tokens.spacing.xl;
     case "lg":
       return "80px";
     case "md":
@@ -330,7 +706,7 @@ var CircularSvg = styled4__default.default.svg`
   height: ${(props) => {
   switch (props.size) {
     case "sm":
-      return "40px";
+      return tokens.spacing.xl;
     case "lg":
       return "80px";
     case "md":
@@ -350,28 +726,15 @@ var getCircularSize = (size) => {
     default:
       return { radius: 26, strokeWidth: 4 };
   }
-};
-var CircularTrack = styled4__default.default.circle`
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.1);
-  stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
-`;
-var CircularFill = styled4__default.default.circle`
-  fill: none;
-  stroke: ${(props) => {
-  switch (props.status) {
-    case "pending":
-      return "#6B7280";
-    case "running":
-      return "#3B82F6";
-    case "completed":
-      return "#10B981";
-    case "failed":
-      return "#EF4444";
-    case "timeout":
-      return "#F59E0B";
-  }
-}};
+};
+var CircularTrack = styled2__default.default.circle`
+  fill: none;
+  stroke: ${tokens.colors.border.default};
+  stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
+`;
+var CircularFill = styled2__default.default.circle`
+  fill: none;
+  stroke: ${(props) => statusColors[props.status]};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
   stroke-dasharray: ${(props) => {
   const { radius } = getCircularSize(props.size);
@@ -384,23 +747,23 @@ var CircularFill = styled4__default.default.circle`
   return props.indeterminate ? 0 : circumference * (1 - props.progress / 100);
 }};
   stroke-linecap: round;
-  transition: ${(props) => props.animated && !props.indeterminate ? "stroke-dashoffset 0.3s ease-out" : "none"};
+  transition: ${(props) => props.animated && !props.indeterminate ? `stroke-dashoffset ${tokens.transitions.normal}` : "none"};
   animation: ${(props) => props.indeterminate ? rotate : "none"} 1.5s linear infinite;
 `;
-var CircularPercentage = styled4__default.default.text`
-  fill: #FFFFFF;
+var CircularPercentage = styled2__default.default.text`
+  fill: ${tokens.colors.text.primary};
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
-      return "10px";
+      return tokens.typography.fontSize.xs;
     case "lg":
-      return "16px";
+      return tokens.typography.fontSize.base;
     case "md":
     default:
-      return "12px";
+      return tokens.typography.fontSize.xs;
   }
 }};
-  font-weight: 600;
+  font-weight: ${tokens.typography.fontWeight.semibold};
   text-anchor: middle;
   dominant-baseline: middle;
   transform: rotate(90deg);
@@ -488,60 +851,59 @@ var WorkflowProgressBar = ({
   ] });
 };
 WorkflowProgressBar.displayName = "WorkflowProgressBar";
-var Panel = styled4__default.default.div`
+var Panel = styled2__default.default.div`
   display: flex;
   flex-direction: column;
-  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
+  background-color: ${tokens.colors.surface.overlay};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.md};
   overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header = styled4__default.default.div`
+var Header2 = styled2__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
-  background-color: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background-color: ${tokens.colors.surface.subtle};
+  border-bottom: 1px solid ${tokens.colors.border.default};
   cursor: ${(props) => props.collapsible ? "pointer" : "default"};
   user-select: none;
 
   &:hover {
-    background-color: ${(props) => props.collapsible ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.02)"};
+    background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
   }
 `;
-var Title = styled4__default.default.div`
-  font-size: 14px;
-  font-weight: 500;
-  color: #FFFFFF;
+var Title2 = styled2__default.default.div`
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.primary};
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: ${tokens.spacing.sm};
 `;
-var Actions = styled4__default.default.div`
+var Actions2 = styled2__default.default.div`
   display: flex;
-  gap: 8px;
+  gap: ${tokens.spacing.sm};
 `;
-var IconButton = styled4__default.default.button`
+var IconButton = styled2__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   padding: 0;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-  color: #9CA3AF;
+  background: ${tokens.colors.surface.overlay};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.sm};
+  color: ${tokens.colors.text.secondary};
   cursor: pointer;
-  transition: all 0.15s ease-in-out;
+  transition: all ${tokens.transitions.fast};
 
   &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
-    color: #FFFFFF;
+    background: ${tokens.colors.surface.overlayHover};
+    border-color: ${tokens.colors.border.hover};
+    color: ${tokens.colors.text.primary};
   }
 
   &:active {
@@ -553,27 +915,27 @@ var IconButton = styled4__default.default.button`
     height: 16px;
   }
 `;
-var CollapseIcon = styled4__default.default.div`
+var CollapseIcon = styled2__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.2s ease-in-out;
+  transition: transform ${tokens.transitions.fast};
   transform: ${(props) => props.expanded ? "rotate(180deg)" : "rotate(0deg)"};
-  color: #9CA3AF;
+  color: ${tokens.colors.text.secondary};
 
   svg {
     width: 16px;
     height: 16px;
   }
 `;
-var Content = styled4__default.default.div`
-  padding: 16px;
+var Content2 = styled2__default.default.div`
+  padding: ${tokens.spacing.md};
   max-height: ${(props) => {
   if (!props.expanded) return "0";
   return props.maxHeight || "400px";
 }};
   overflow: ${(props) => props.expanded ? "auto" : "hidden"};
-  transition: max-height 0.3s ease-in-out;
+  transition: max-height ${tokens.transitions.normal};
 
   /* Custom scrollbar */
   &::-webkit-scrollbar {
@@ -581,66 +943,66 @@ var Content = styled4__default.default.div`
   }
 
   &::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 4px;
+    background: ${tokens.colors.scrollbar.track};
+    border-radius: ${tokens.borderRadius.sm};
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
+    background: ${tokens.colors.scrollbar.thumb};
+    border-radius: ${tokens.borderRadius.sm};
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
+    background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var JsonView = styled4__default.default.pre`
+var JsonView = styled2__default.default.pre`
   margin: 0;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #E5E7EB;
+  font-family: ${tokens.typography.fontFamily.monospace};
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.normal};
+  color: ${tokens.colors.text.secondary};
   white-space: pre-wrap;
   word-break: break-word;
 `;
-var FormattedView = styled4__default.default.div`
-  font-size: 14px;
-  line-height: 1.6;
-  color: #E5E7EB;
+var FormattedView = styled2__default.default.div`
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.normal};
+  color: ${tokens.colors.text.secondary};
 `;
-var TableView = styled4__default.default.table`
+var TableView = styled2__default.default.table`
   width: 100%;
   border-collapse: collapse;
-  font-size: 13px;
+  font-size: ${tokens.typography.fontSize.sm};
 
   th {
     text-align: left;
-    padding: 8px 12px;
-    background-color: rgba(255, 255, 255, 0.05);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    font-weight: 500;
-    color: #FFFFFF;
+    padding: ${tokens.spacing.sm} ${tokens.spacing.sm};
+    background-color: ${tokens.colors.surface.overlay};
+    border-bottom: 1px solid ${tokens.colors.border.default};
+    font-weight: ${tokens.typography.fontWeight.medium};
+    color: ${tokens.colors.text.primary};
   }
 
   td {
-    padding: 8px 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    color: #E5E7EB;
+    padding: ${tokens.spacing.sm} ${tokens.spacing.sm};
+    border-bottom: 1px solid ${tokens.colors.border.subtle};
+    color: ${tokens.colors.text.secondary};
   }
 
   tr:last-child td {
     border-bottom: none;
   }
 `;
-var EmptyState = styled4__default.default.div`
-  padding: 32px;
+var EmptyState = styled2__default.default.div`
+  padding: ${tokens.spacing.xl};
   text-align: center;
-  color: #6B7280;
-  font-size: 14px;
+  color: ${tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.sm};
 `;
 var DownloadIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) });
 var CopyIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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 ChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }) });
+var ChevronIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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",
@@ -691,302 +1053,235 @@ var WorkflowResultPanel = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { collapsible, expanded, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { collapsible, onClick: handleToggle, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header2, { collapsible, onClick: handleToggle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
         title,
-        collapsible && /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { expanded, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {}) })
+        collapsible && /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { expanded, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, {}) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Actions, { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Actions2, { onClick: (e) => e.stopPropagation(), children: [
         onCopy && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onCopy, title: "Copy to clipboard", "aria-label": "Copy to clipboard", children: /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {}) }),
         onDownload && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onDownload, title: "Download", "aria-label": "Download results", children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content, { maxHeight, expanded, children: renderContent() })
+    /* @__PURE__ */ jsxRuntime.jsx(Content2, { maxHeight, expanded, children: renderContent() })
   ] });
 };
 WorkflowResultPanel.displayName = "WorkflowResultPanel";
-var AlertContainer = styled4__default.default.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(props) => {
-  const alpha = props.variant === "modal" ? "0.15" : props.variant === "banner" ? "0.1" : "0.05";
-  switch (props.severity) {
-    case "error":
-      return `rgba(239, 68, 68, ${alpha})`;
-    case "warning":
-      return `rgba(245, 158, 11, ${alpha})`;
-    case "info":
-      return `rgba(59, 130, 246, ${alpha})`;
+var spin = styled2.keyframes`
+  from {
+    transform: rotate(0deg);
   }
-}};
-  border: 1px solid
-    ${(props) => {
-  const alpha = props.variant === "modal" ? "0.4" : "0.3";
-  switch (props.severity) {
-    case "error":
-      return `rgba(239, 68, 68, ${alpha})`;
-    case "warning":
-      return `rgba(245, 158, 11, ${alpha})`;
-    case "info":
-      return `rgba(59, 130, 246, ${alpha})`;
+  to {
+    transform: rotate(360deg);
   }
-}};
-  border-radius: ${(props) => props.variant === "banner" ? "0" : "8px"};
-  padding: ${(props) => props.variant === "modal" ? "20px" : "16px"};
-  margin: ${(props) => props.variant === "banner" ? "0" : "8px 0"};
-  width: ${(props) => props.variant === "modal" ? "auto" : "100%"};
-  max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-`;
-var ModalOverlay = styled4__default.default.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  display: ${(props) => props.isOpen ? "flex" : "none"};
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 20px;
-`;
-var ModalContent = styled4__default.default.div`
-  background-color: #1A1A1A;
-  border-radius: 12px;
-  max-width: 500px;
-  width: 100%;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
-`;
-var Header2 = styled4__default.default.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
 `;
-var IconContainer2 = styled4__default.default.div`
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  color: ${(props) => {
-  switch (props.severity) {
-    case "error":
-      return "#EF4444";
-    case "warning":
-      return "#F59E0B";
-    case "info":
-      return "#3B82F6";
+var pulse = styled2.keyframes`
+  0%, 100% {
+    opacity: 1;
   }
-}};
-`;
-var Content2 = styled4__default.default.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-var Title2 = styled4__default.default.div`
-  font-size: 15px;
-  font-weight: 600;
-  color: #FFFFFF;
-  line-height: 1.4;
-`;
-var ErrorMessage = styled4__default.default.div`
-  font-size: 14px;
-  line-height: 1.5;
-  color: #E5E7EB;
-`;
-var ErrorCode = styled4__default.default.div`
-  font-size: 12px;
-  color: #9CA3AF;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  margin-top: 4px;
-`;
-var Timestamp = styled4__default.default.div`
-  font-size: 12px;
-  color: #6B7280;
-  margin-top: 4px;
-`;
-var Details = styled4__default.default.details`
-  margin-top: 12px;
-  cursor: pointer;
-
-  summary {
-    font-size: 13px;
-    font-weight: 500;
-    color: #9CA3AF;
-    user-select: none;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    &:hover {
-      color: #FFFFFF;
-    }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
+  50% {
+    opacity: 0.5;
   }
 `;
-var DetailsIcon = styled4__default.default.span`
-  display: inline-block;
-  transition: transform 0.2s ease-in-out;
-  transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
-`;
-var StackTrace = styled4__default.default.pre`
-  margin: 8px 0 0 0;
-  padding: 12px;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  font-size: 11px;
-  line-height: 1.5;
-  color: #D1D5DB;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-`;
-var Actions2 = styled4__default.default.div`
-  display: flex;
-  gap: 8px;
-  margin-top: 16px;
-`;
-var Button = styled4__default.default.button`
+var statusColors2 = {
+  pending: tokens.colors.status.pending,
+  running: tokens.colors.status.running,
+  completed: tokens.colors.status.completed,
+  failed: tokens.colors.status.failed,
+  timeout: tokens.colors.status.timeout
+};
+var BadgeContainer = styled2__default.default.div`
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: ${(props) => props.variant === "primary" ? "#FFFFFF" : "#9CA3AF"};
-  background: ${(props) => props.variant === "primary" ? "#EF4444" : "rgba(255, 255, 255, 0.05)"};
-  border: 1px solid
-    ${(props) => props.variant === "primary" ? "#EF4444" : "rgba(255, 255, 255, 0.1)"};
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease-in-out;
-
-  &:hover {
-    background: ${(props) => props.variant === "primary" ? "#DC2626" : "rgba(255, 255, 255, 0.1)"};
-    border-color: ${(props) => props.variant === "primary" ? "#DC2626" : "rgba(255, 255, 255, 0.2)"};
+  gap: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return tokens.spacing.xs;
+    case "lg":
+      return tokens.spacing.sm;
+    case "md":
+    default:
+      return "6px";
   }
-
-  &:active {
-    transform: scale(0.98);
+}};
+  padding: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return `${tokens.spacing.xs} ${tokens.spacing.sm}`;
+    case "lg":
+      return `${tokens.spacing.sm} ${tokens.spacing.md}`;
+    case "md":
+    default:
+      return `6px ${tokens.spacing.md}`;
   }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+}};
+  background-color: ${(props) => `${statusColors2[props.$status]}1A`};
+  border: 1px solid ${(props) => `${statusColors2[props.$status]}4D`};
+  border-radius: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return tokens.borderRadius.sm;
+    case "lg":
+      return tokens.borderRadius.md;
+    case "md":
+    default:
+      return tokens.borderRadius.md;
+  }
+}};
+  font-family: ${tokens.typography.fontFamily.primary};
+  font-size: ${(props) => {
+  switch (props.$size) {
+    case "sm":
+      return "11px";
+    case "lg":
+      return "15px";
+    case "md":
+    default:
+      return "13px";
   }
+}};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${(props) => statusColors2[props.$status]};
+  line-height: 1.4;
 `;
-var CloseButton = styled4__default.default.button`
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
+var IconContainer2 = styled2__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
-  border: none;
-  color: #9CA3AF;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.15s ease-in-out;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #FFFFFF;
+  width: 16px;
+  height: 16px;
+  animation: ${(props) => {
+  if (props.$animated) {
+    if (props.$status === "running") return spin;
+    if (props.$status === "pending") return pulse;
   }
-
-  &:active {
-    transform: scale(0.95);
+  return "none";
+}}
+    ${(props) => props.$status === "running" ? "1s" : "2s"} linear infinite;
+`;
+var PendingIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" })
   }
-
-  svg {
-    width: 20px;
-    height: 20px;
+);
+var RunningIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",
+          opacity: "0.3"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
+    ]
+  }
+);
+var CompletedIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
+  }
+);
+var FailedIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })
+  }
+);
+var TimeoutIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
   }
+);
+var Label = styled2__default.default.span`
+  white-space: nowrap;
 `;
-var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) });
-var WarningIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
-var InfoIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) });
-var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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 ChevronIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
-var WorkflowErrorAlert = ({
-  error,
-  errorCode,
-  timestamp,
-  variant = "inline",
-  severity = "error",
-  retryable = false,
-  onRetry,
-  onDismiss,
-  showDetails = false,
-  stackTrace,
-  title,
+var getDefaultLabel = (status) => {
+  switch (status) {
+    case "pending":
+      return "Pending";
+    case "running":
+      return "Running";
+    case "completed":
+      return "Completed";
+    case "failed":
+      return "Failed";
+    case "timeout":
+      return "Timeout";
+  }
+};
+var getStatusIcon = (status) => {
+  switch (status) {
+    case "pending":
+      return /* @__PURE__ */ jsxRuntime.jsx(PendingIcon, {});
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(RunningIcon, {});
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx(CompletedIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx(FailedIcon, {});
+    case "timeout":
+      return /* @__PURE__ */ jsxRuntime.jsx(TimeoutIcon, {});
+  }
+};
+var WorkflowStatusBadge = ({
+  status,
+  size = "md",
+  showIcon = true,
+  showLabel = true,
+  animated = true,
+  label,
   className
 }) => {
-  const [detailsOpen, setDetailsOpen] = react.useState(false);
-  const [isModalOpen, setIsModalOpen] = react.useState(variant === "modal");
-  const errorMessage = typeof error === "string" ? error : error.message;
-  const defaultTitle = severity === "error" ? "Workflow Error" : severity === "warning" ? "Warning" : "Information";
-  const displayTitle = title || defaultTitle;
-  const handleDismiss = () => {
-    if (variant === "modal") {
-      setIsModalOpen(false);
-    }
-    onDismiss?.();
-  };
-  const getIcon = () => {
-    switch (severity) {
-      case "error":
-        return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {});
-      case "warning":
-        return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {});
-      case "info":
-        return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {});
+  const displayLabel = label || getDefaultLabel(status);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BadgeContainer,
+    {
+      $status: status,
+      $size: size,
+      className,
+      role: "status",
+      "aria-label": displayLabel,
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { $animated: animated, $status: status, "aria-hidden": "true", children: getStatusIcon(status) }),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: displayLabel })
+      ]
     }
-  };
-  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { severity, "aria-hidden": "true", children: getIcon() }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: displayTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: errorMessage }),
-      errorCode && /* @__PURE__ */ jsxRuntime.jsxs(ErrorCode, { children: [
-        "Error Code: ",
-        errorCode
-      ] }),
-      timestamp && /* @__PURE__ */ jsxRuntime.jsx(Timestamp, { children: new Date(timestamp).toLocaleString() }),
-      showDetails && (stackTrace || typeof error === "object" && error.stack) && /* @__PURE__ */ jsxRuntime.jsxs(Details, { open: detailsOpen, onToggle: (e) => setDetailsOpen(e.target.open), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("summary", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DetailsIcon, { open: detailsOpen, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, {}) }),
-          "Show Details"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(StackTrace, { children: stackTrace || (typeof error === "object" ? error.stack : "") })
-      ] }),
-      (retryable || onDismiss) && /* @__PURE__ */ jsxRuntime.jsxs(Actions2, { children: [
-        retryable && onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: onRetry, children: "Retry" }),
-        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: handleDismiss, children: "Dismiss" })
-      ] })
-    ] }),
-    variant !== "modal" && onDismiss && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleDismiss, "aria-label": "Dismiss alert", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
-  ] }) });
-  if (variant === "modal") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen: isModalOpen, onClick: handleDismiss, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { onClick: (e) => e.stopPropagation(), children: [
-      alertContent,
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleDismiss, "aria-label": "Close modal", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
-    ] }) });
-  }
-  return alertContent;
+  );
 };
-WorkflowErrorAlert.displayName = "WorkflowErrorAlert";
+WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
 
+exports.WorkflowCard = WorkflowCard;
 exports.WorkflowErrorAlert = WorkflowErrorAlert;
 exports.WorkflowProgressBar = WorkflowProgressBar;
 exports.WorkflowResultPanel = WorkflowResultPanel;