@mdxui/do 2.1.1 → 3.0.0

package/dist/chunk-NXPXL5NA.js

@@ -1,3789 +0,0 @@
-import { useThings, useCreateThing } from './chunk-EEDMN7UF.js';
-import { cn, formatNumber, truncate, formatRelativeTime, formatDateTime, formatDuration, useDO, useDataProviderSafe } from './chunk-XF6LKY2M.js';
-import * as React9 from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LayoutDashboard, Database, GitBranch, Workflow, Bot, Zap, Plug, Users, Building, Key, Settings, Menu, Search, Bell, User, ChevronDown, TrendingUp, TrendingDown, Filter, Trash2, Plus, MoreHorizontal, Eye, Edit, History, Play, CheckCircle2, RefreshCw, StopCircle, XCircle, Loader2, Clock, AlertCircle, ChevronRight, X, ThumbsUp, ThumbsDown, Coins, ChevronLeft, WifiOff, Wifi, Activity } from 'lucide-react';
-
-var ShellContext = React9.createContext(null);
-function useShell() {
-  const context = React9.useContext(ShellContext);
-  if (!context) {
-    throw new Error("useShell must be used within a DOShell");
-  }
-  return context;
-}
-function DOShell({
-  sidebar,
-  header,
-  children,
-  defaultSidebarOpen = true,
-  sidebarOpen: controlledSidebarOpen,
-  onSidebarOpenChange,
-  className
-}) {
-  const [internalSidebarOpen, setInternalSidebarOpen] = React9.useState(defaultSidebarOpen);
-  const sidebarOpen = controlledSidebarOpen ?? internalSidebarOpen;
-  const setSidebarOpen = onSidebarOpenChange ?? setInternalSidebarOpen;
-  const contextValue = React9.useMemo(
-    () => ({
-      sidebarOpen,
-      setSidebarOpen,
-      toggleSidebar: () => setSidebarOpen(!sidebarOpen)
-    }),
-    [sidebarOpen, setSidebarOpen]
-  );
-  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": "do-shell",
-      className: cn("flex h-screen w-full overflow-hidden bg-background", className),
-      children: [
-        sidebar && /* @__PURE__ */ jsx(
-          "aside",
-          {
-            "data-testid": "do-sidebar",
-            className: cn(
-              "flex h-full flex-col border-r border-border bg-muted/30 transition-all duration-300",
-              sidebarOpen ? "w-64" : "w-0 overflow-hidden"
-            ),
-            children: sidebar
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-          header && /* @__PURE__ */ jsx(
-            "header",
-            {
-              "data-testid": "do-header",
-              className: "flex h-14 shrink-0 items-center border-b border-border bg-background px-4",
-              children: header
-            }
-          ),
-          /* @__PURE__ */ jsx("main", { "data-testid": "do-main", className: "flex-1 overflow-auto", children })
-        ] })
-      ]
-    }
-  ) });
-}
-var defaultNavItems = [
-  {
-    id: "dashboard",
-    label: "Dashboard",
-    icon: LayoutDashboard,
-    href: "/"
-  },
-  {
-    id: "things",
-    label: "Things",
-    icon: Database,
-    href: "/things"
-  },
-  {
-    id: "relationships",
-    label: "Relationships",
-    icon: GitBranch,
-    href: "/relationships"
-  },
-  {
-    id: "workflows",
-    label: "Workflows",
-    icon: Workflow,
-    href: "/workflows"
-  },
-  {
-    id: "agents",
-    label: "Agents",
-    icon: Bot,
-    href: "/agents"
-  },
-  {
-    id: "events",
-    label: "Events",
-    icon: Zap,
-    href: "/events"
-  },
-  {
-    id: "integrations",
-    label: "Integrations",
-    icon: Plug,
-    href: "/integrations"
-  },
-  {
-    id: "settings",
-    label: "Settings",
-    icon: Settings,
-    children: [
-      {
-        id: "users",
-        label: "Users",
-        icon: Users,
-        href: "/settings/users"
-      },
-      {
-        id: "organizations",
-        label: "Organizations",
-        icon: Building,
-        href: "/settings/organizations"
-      },
-      {
-        id: "api-keys",
-        label: "API Keys",
-        icon: Key,
-        href: "/settings/api-keys"
-      }
-    ]
-  }
-];
-function DOSidebar({
-  header,
-  items = defaultNavItems,
-  activeItem,
-  footer,
-  onItemClick,
-  className
-}) {
-  const [expandedItems, setExpandedItems] = React9.useState(/* @__PURE__ */ new Set());
-  const toggleExpanded = (id) => {
-    setExpandedItems((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-  const renderNavItem = (item, depth = 0) => {
-    const Icon = item.icon;
-    const hasChildren = item.children && item.children.length > 0;
-    const isExpanded = expandedItems.has(item.id);
-    const isActive = activeItem === item.id;
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "data-testid": `nav-${item.id}`,
-          "data-active": isActive ? "true" : void 0,
-          onClick: () => {
-            if (hasChildren) {
-              toggleExpanded(item.id);
-            } else {
-              onItemClick?.(item);
-            }
-          },
-          disabled: item.disabled,
-          className: cn(
-            "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-            "hover:bg-accent hover:text-accent-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            isActive && "bg-accent text-accent-foreground",
-            item.disabled && "cursor-not-allowed opacity-50",
-            depth > 0 && "ml-6"
-          ),
-          children: [
-            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: item.label }),
-            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: item.badge }),
-            hasChildren && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
-          ]
-        }
-      ),
-      hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: item.children.map((child) => renderNavItem(child, depth + 1)) })
-    ] }, item.id);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
-    header && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border p-4", children: header }),
-    /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-1 overflow-auto p-4", children: items.map((item) => renderNavItem(item)) }),
-    footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-4", children: footer })
-  ] });
-}
-function DOSidebarHeader({ logo, title = ".do Admin", subtitle, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
-    logo && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: typeof logo === "string" ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-6 w-6" }) : logo }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "truncate font-semibold", children: title }),
-      subtitle && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: subtitle })
-    ] })
-  ] });
-}
-function DOHeader({
-  title,
-  breadcrumbs,
-  showSearch = true,
-  searchPlaceholder = "Search...",
-  searchValue,
-  onSearchChange,
-  actions,
-  user,
-  onUserMenuClick,
-  className
-}) {
-  const shell = useShell();
-  const [isUserMenuOpen, setIsUserMenuOpen] = React9.useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-4", className), children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        "data-testid": "sidebar-toggle",
-        onClick: shell.toggleSidebar,
-        className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
-        "aria-label": shell.sidebarOpen ? "Close sidebar" : "Open sidebar",
-        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1", children: breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/" }),
-      crumb.href ? /* @__PURE__ */ jsx("a", { href: crumb.href, className: "text-muted-foreground hover:text-foreground", children: crumb.label }) : /* @__PURE__ */ jsx("span", { className: "font-medium", children: crumb.label })
-    ] }, index)) }) : title ? /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: title }) : null }),
-    showSearch && /* @__PURE__ */ jsxs("div", { className: "relative w-64", children: [
-      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          "data-testid": "header-search-input",
-          type: "text",
-          placeholder: searchPlaceholder,
-          value: searchValue,
-          onChange: (e) => onSearchChange?.(e.target.value),
-          className: cn(
-            "h-9 w-full rounded-md border border-input bg-background pl-9 pr-4 text-sm",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          )
-        }
-      )
-    ] }),
-    actions,
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-testid": "notifications-button",
-        className: "relative flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
-        children: [
-          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" })
-        ]
-      }
-    ),
-    user && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "data-testid": "user-menu",
-          onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
-          className: "flex items-center gap-2 rounded-md px-2 py-1 hover:bg-accent",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-muted", children: user.avatar ? /* @__PURE__ */ jsx("img", { src: user.avatar, alt: "", className: "h-8 w-8 rounded-full" }) : /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "hidden text-left sm:block", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: user.name }),
-              user.email && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: user.email })
-            ] }),
-            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
-          ]
-        }
-      ),
-      isUserMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setIsUserMenuOpen(false) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-48 rounded-md border border-border bg-popover py-1 shadow-lg", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-testid": "user-menu-profile",
-              onClick: () => {
-                onUserMenuClick?.("profile");
-                setIsUserMenuOpen(false);
-              },
-              className: "flex w-full items-center px-4 py-2 text-sm hover:bg-accent",
-              children: "Profile"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-testid": "user-menu-settings",
-              onClick: () => {
-                onUserMenuClick?.("settings");
-                setIsUserMenuOpen(false);
-              },
-              className: "flex w-full items-center px-4 py-2 text-sm hover:bg-accent",
-              children: "Settings"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-testid": "user-menu-logout",
-              onClick: () => {
-                onUserMenuClick?.("logout");
-                setIsUserMenuOpen(false);
-              },
-              className: "flex w-full items-center px-4 py-2 text-sm text-destructive hover:bg-accent",
-              children: "Log out"
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function SyncStatusIndicator({
-  state = "connected",
-  showLabel = false,
-  label,
-  className
-}) {
-  const getStatusConfig = () => {
-    switch (state) {
-      case "connected":
-        return {
-          icon: Wifi,
-          color: "text-green-500",
-          defaultLabel: "Connected"
-        };
-      case "disconnected":
-        return {
-          icon: WifiOff,
-          color: "text-destructive",
-          defaultLabel: "Disconnected"
-        };
-      case "syncing":
-        return {
-          icon: RefreshCw,
-          color: "text-yellow-500",
-          defaultLabel: "Syncing...",
-          animate: true
-        };
-    }
-  };
-  const config = getStatusConfig();
-  const Icon = config.icon;
-  const displayLabel = label ?? config.defaultLabel;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": "sync-status",
-      "data-sync-state": state,
-      className: cn("flex items-center gap-2", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            className: cn(
-              "h-4 w-4",
-              config.color,
-              "animate" in config && config.animate && "animate-spin"
-            )
-          }
-        ),
-        showLabel && /* @__PURE__ */ jsx("span", { className: cn("text-sm", config.color), children: displayLabel })
-      ]
-    }
-  );
-}
-var defaultStats = [
-  { title: "Things", value: 0, icon: Database, color: "primary" },
-  { title: "Relationships", value: 0, icon: GitBranch, color: "default" },
-  { title: "Workflows", value: 0, icon: Workflow, color: "success" },
-  { title: "Agents", value: 0, icon: Bot, color: "warning" },
-  { title: "Events Today", value: 0, icon: Zap, color: "destructive" }
-];
-var colorClasses = {
-  default: "bg-muted text-muted-foreground",
-  primary: "bg-primary/10 text-primary",
-  success: "bg-green-500/10 text-green-600 dark:text-green-400",
-  warning: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-  destructive: "bg-destructive/10 text-destructive"
-};
-function StatsCards({ stats, loading = false, onCardClick, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", className), children: stats.map((stat, index) => {
-    const Icon = stat.icon;
-    const trend = stat.previousValue !== void 0 ? (stat.value - stat.previousValue) / stat.previousValue * 100 : void 0;
-    const isPositive = trend !== void 0 && trend >= 0;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => onCardClick?.(stat),
-        className: cn(
-          "flex flex-col rounded-lg border border-border bg-card p-4 text-left transition-colors",
-          "hover:bg-accent/50",
-          loading && "animate-pulse"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: stat.title }),
-            Icon && /* @__PURE__ */ jsx("div", { className: cn("rounded-md p-2", colorClasses[stat.color || "default"]), children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", children: formatNumber(stat.value) }),
-            trend !== void 0 && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: cn(
-                  "flex items-center text-xs font-medium",
-                  isPositive ? "text-green-600" : "text-destructive"
-                ),
-                children: [
-                  isPositive ? /* @__PURE__ */ jsx(TrendingUp, { className: "mr-0.5 h-3 w-3" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "mr-0.5 h-3 w-3" }),
-                  Math.abs(trend).toFixed(1),
-                  "%"
-                ]
-              }
-            )
-          ] })
-        ]
-      },
-      index
-    );
-  }) });
-}
-function ThingsList({
-  things,
-  total,
-  loading = false,
-  selectedIds = [],
-  filter,
-  sort,
-  pagination = { page: 1, perPage: 20 },
-  availableTypes = [],
-  onFilterChange,
-  onSortChange,
-  onPaginationChange,
-  onThingClick,
-  onThingDoubleClick,
-  onThingSelect,
-  onAction,
-  onCreate,
-  className
-}) {
-  const [searchValue, setSearchValue] = React9.useState(filter?.nameSearch || "");
-  const [showFilters, setShowFilters] = React9.useState(false);
-  const [openMenuId, setOpenMenuId] = React9.useState(null);
-  const [selectedRowId, setSelectedRowId] = React9.useState(null);
-  const totalPages = Math.ceil(total / pagination.perPage) || 1;
-  const currentTypeFilter = filter?.type ? Array.isArray(filter.type) ? filter.type[0] : filter.type : "";
-  const handleSearch = (value) => {
-    setSearchValue(value);
-    onFilterChange?.({ ...filter, nameSearch: value || void 0 });
-  };
-  const handleSearchKeyDown = (e) => {
-    if (e.key === "Enter") {
-      onFilterChange?.({ ...filter, nameSearch: searchValue || void 0 });
-    }
-  };
-  const handleClearSearch = () => {
-    setSearchValue("");
-    onFilterChange?.({ ...filter, nameSearch: void 0 });
-  };
-  const handleTypeFilter = (type) => {
-    onFilterChange?.({ ...filter, type: type || void 0 });
-  };
-  const handleSort = (field) => {
-    const newOrder = sort?.field === field && sort.order === "asc" ? "desc" : "asc";
-    onSortChange?.({ field, order: newOrder });
-  };
-  const handleRowClick = (thing) => {
-    setSelectedRowId(thing.id);
-    onThingClick?.(thing);
-  };
-  const handleRowDoubleClick = (thing) => {
-    onThingDoubleClick?.(thing);
-    onAction?.(thing, "edit");
-  };
-  React9.useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (!selectedRowId) return;
-      const selectedThing = things.find((t) => t.id === selectedRowId);
-      if (!selectedThing) return;
-      if (e.key === "e") {
-        e.preventDefault();
-        onAction?.(selectedThing, "edit");
-      } else if (e.key === "Delete" || e.key === "Backspace") {
-        e.preventDefault();
-        onAction?.(selectedThing, "delete");
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        onAction?.(selectedThing, "edit");
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [selectedRowId, things, onAction]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-border p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              "data-testid": "search-input",
-              placeholder: "Search things...",
-              value: searchValue,
-              onChange: (e) => handleSearch(e.target.value),
-              onKeyDown: handleSearchKeyDown,
-              className: cn(
-                "h-9 w-64 rounded-md border border-input bg-background pl-9 pr-8 text-sm",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              )
-            }
-          ),
-          searchValue && /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-testid": "clear-search",
-              onClick: handleClearSearch,
-              className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: [
-                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ]
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              "data-testid": "type-filter",
-              value: currentTypeFilter,
-              onChange: (e) => handleTypeFilter(e.target.value),
-              className: cn(
-                "h-9 appearance-none rounded-md border border-input bg-background pl-3 pr-8 text-sm",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "All Types" }),
-                availableTypes.map((type) => /* @__PURE__ */ jsx("option", { value: type, "data-testid": `type-option-${type}`, children: type }, type))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none" })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setShowFilters(!showFilters),
-            className: cn(
-              "flex h-9 items-center gap-2 rounded-md border border-input px-3 text-sm",
-              "hover:bg-accent",
-              showFilters && "bg-accent"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
-              "Filters"
-            ]
-          }
-        ),
-        selectedIds.length > 0 && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            "data-testid": "selection-count",
-            className: "text-sm text-muted-foreground",
-            children: [
-              selectedIds.length,
-              " selected"
-            ]
-          }
-        ),
-        selectedIds.length > 0 && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "data-testid": "bulk-delete-btn",
-            onClick: () => {
-              const selectedThing = things.find((t) => selectedIds.includes(t.id));
-              if (selectedThing) {
-                onAction?.(selectedThing, "delete");
-              }
-            },
-            className: cn(
-              "flex h-9 items-center gap-2 rounded-md px-3 text-sm",
-              "bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
-              "Delete"
-            ]
-          }
-        )
-      ] }),
-      onCreate && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "data-testid": "create-thing-btn",
-          onClick: onCreate,
-          className: cn(
-            "flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground",
-            "hover:bg-primary/90",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-            "Create Thing"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("table", { "data-testid": "things-table", className: "w-full", children: [
-      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: "w-8 p-4", children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            "data-testid": "select-all-checkbox",
-            className: "h-4 w-4 rounded border-input",
-            checked: selectedIds.length > 0 && selectedIds.length === things.length,
-            onChange: (e) => {
-              things.forEach((thing) => onThingSelect?.(thing, e.target.checked));
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "th",
-          {
-            "data-testid": "header-name",
-            className: "cursor-pointer p-4 text-left text-sm font-medium text-muted-foreground hover:text-foreground",
-            onClick: () => handleSort("name"),
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              "Name",
-              sort?.field === "name" && /* @__PURE__ */ jsx("span", { "data-testid": "sort-indicator", children: sort.order === "asc" ? "\u2191" : "\u2193" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "th",
-          {
-            "data-testid": "header-type",
-            className: "cursor-pointer p-4 text-left text-sm font-medium text-muted-foreground hover:text-foreground",
-            onClick: () => handleSort("type"),
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              "Type",
-              sort?.field === "type" && /* @__PURE__ */ jsx("span", { "data-testid": "sort-indicator", children: sort.order === "asc" ? "\u2191" : "\u2193" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Namespace" }),
-        /* @__PURE__ */ jsx(
-          "th",
-          {
-            "data-testid": "header-updated",
-            className: "cursor-pointer p-4 text-left text-sm font-medium text-muted-foreground hover:text-foreground",
-            onClick: () => handleSort("updatedAt"),
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              "Updated",
-              sort?.field === "updatedAt" && /* @__PURE__ */ jsx("span", { "data-testid": "sort-indicator", children: sort.order === "asc" ? "\u2191" : "\u2193" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx("th", { className: "w-12 p-4" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: loading ? (
-        // Loading skeleton
-        Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("tr", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-32 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-20 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-28 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4" })
-        ] }, i))
-      ) : things.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 6, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "things-empty-state",
-          className: "flex flex-col items-center justify-center gap-2 p-8 text-center",
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No things found" }),
-            onCreate && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onCreate,
-                className: "text-sm text-primary hover:underline",
-                children: "Create your first Thing"
-              }
-            )
-          ]
-        }
-      ) }) }) : things.map((thing) => /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          "data-testid": "things-row",
-          "data-selected": selectedRowId === thing.id ? "true" : void 0,
-          className: cn(
-            "cursor-pointer border-b border-border",
-            "hover:bg-muted/50",
-            selectedRowId === thing.id && "bg-muted"
-          ),
-          onClick: () => handleRowClick(thing),
-          onDoubleClick: () => handleRowDoubleClick(thing),
-          children: [
-            /* @__PURE__ */ jsx("td", { className: "p-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                "data-testid": "row-checkbox",
-                className: "h-4 w-4 rounded border-input",
-                checked: selectedIds.includes(thing.id),
-                onChange: (e) => onThingSelect?.(thing, e.target.checked)
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("td", { className: "p-4", "data-testid": "thing-name-cell", children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium", children: thing.name || thing.id }),
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: truncate(thing.id, 30) })
-            ] }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", "data-testid": "thing-type-cell", children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-1 text-xs font-medium", children: thing.type }) }),
-            /* @__PURE__ */ jsx("td", { className: "p-4 text-sm text-muted-foreground", children: thing.ns }),
-            /* @__PURE__ */ jsx("td", { className: "p-4 text-sm text-muted-foreground", children: formatRelativeTime(thing.updatedAt) }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "data-testid": "row-actions-menu",
-                  onClick: () => setOpenMenuId(openMenuId === thing.id ? null : thing.id),
-                  className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
-                  children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
-                }
-              ),
-              openMenuId === thing.id && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "fixed inset-0 z-40",
-                    onClick: () => setOpenMenuId(null)
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-1 w-36 rounded-md border border-border bg-popover py-1 shadow-lg", children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => {
-                        onAction?.(thing, "view");
-                        setOpenMenuId(null);
-                      },
-                      className: "flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
-                      children: [
-                        /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
-                        " View"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      "data-testid": "edit-btn",
-                      onClick: () => {
-                        onAction?.(thing, "edit");
-                        setOpenMenuId(null);
-                      },
-                      className: "flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
-                      children: [
-                        /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }),
-                        " Edit"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => {
-                        onAction?.(thing, "history");
-                        setOpenMenuId(null);
-                      },
-                      className: "flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
-                      children: [
-                        /* @__PURE__ */ jsx(History, { className: "h-4 w-4" }),
-                        " History"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      "data-testid": "delete-btn",
-                      onClick: () => {
-                        onAction?.(thing, "delete");
-                        setOpenMenuId(null);
-                      },
-                      className: "flex w-full items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-accent",
-                      children: [
-                        /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
-                        " Delete"
-                      ]
-                    }
-                  )
-                ] })
-              ] })
-            ] }) })
-          ]
-        },
-        `${thing.ns}/${thing.type}/${thing.id}`
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "pagination",
-        className: "flex items-center justify-between border-t border-border p-4",
-        children: [
-          /* @__PURE__ */ jsx("div", { "data-testid": "page-info", className: "text-sm text-muted-foreground", children: total > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            "Showing ",
-            (pagination.page - 1) * pagination.perPage + 1,
-            " to",
-            " ",
-            Math.min(pagination.page * pagination.perPage, total),
-            " of ",
-            total,
-            " things",
-            " - ",
-            "Page ",
-            pagination.page,
-            " of ",
-            totalPages
-          ] }) : "No results" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "data-testid": "prev-page",
-                onClick: () => onPaginationChange?.({ ...pagination, page: pagination.page - 1 }),
-                disabled: pagination.page <= 1,
-                className: cn(
-                  "h-8 rounded-md border border-input px-3 text-sm",
-                  "hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                children: "Previous"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "data-testid": "next-page",
-                onClick: () => onPaginationChange?.({ ...pagination, page: pagination.page + 1 }),
-                disabled: pagination.page >= totalPages,
-                className: cn(
-                  "h-8 rounded-md border border-input px-3 text-sm",
-                  "hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                children: "Next"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function ThingForm({
-  thing,
-  onSubmit,
-  onCancel,
-  isSubmitting = false,
-  className
-}) {
-  const isEditMode = Boolean(thing);
-  const [formData, setFormData] = React9.useState({
-    type: thing?.type ?? "",
-    name: thing?.name ?? "",
-    description: thing?.data?.description ?? ""
-  });
-  const [errors, setErrors] = React9.useState({});
-  const [hasSubmitted, setHasSubmitted] = React9.useState(false);
-  const typeInputRef = React9.useRef(null);
-  React9.useEffect(() => {
-    typeInputRef.current?.focus();
-  }, []);
-  const validateForm = (data) => {
-    const newErrors = {};
-    const trimmedType = data.type.trim();
-    if (!trimmedType) {
-      newErrors.type = "Type is required";
-    }
-    const trimmedName = data.name.trim();
-    if (!trimmedName) {
-      newErrors.name = "Name is required";
-    }
-    return newErrors;
-  };
-  const handleChange = (field, value) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    if (hasSubmitted) {
-      const newData = { ...formData, [field]: value };
-      const newErrors = validateForm(newData);
-      setErrors((prev) => ({
-        ...prev,
-        [field]: newErrors[field]
-      }));
-    }
-  };
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setHasSubmitted(true);
-    const validationErrors = validateForm(formData);
-    setErrors(validationErrors);
-    if (Object.keys(validationErrors).length > 0) {
-      return;
-    }
-    const trimmedData = {
-      type: formData.type.trim(),
-      name: formData.name.trim(),
-      description: formData.description.trim()
-    };
-    await onSubmit(trimmedData);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      "data-testid": "thing-form",
-      onSubmit: handleSubmit,
-      className: cn("flex flex-col gap-4", className),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              htmlFor: "thing-type",
-              className: "text-sm font-medium text-foreground",
-              children: [
-                "Type ",
-                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: typeInputRef,
-              id: "thing-type",
-              "data-testid": "thing-type-input",
-              type: "text",
-              value: formData.type,
-              onChange: (e) => handleChange("type", e.target.value),
-              onKeyDown: handleKeyDown,
-              disabled: isEditMode || isSubmitting,
-              placeholder: "e.g., Task, Project, Person",
-              "aria-invalid": Boolean(errors.type),
-              "aria-describedby": errors.type ? "type-error" : void 0,
-              className: cn(
-                "h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
-                errors.type ? "border-destructive focus-visible:ring-destructive" : "border-input",
-                isEditMode && "bg-muted"
-              )
-            }
-          ),
-          errors.type && /* @__PURE__ */ jsx(
-            "p",
-            {
-              id: "type-error",
-              "data-testid": "field-error-type",
-              className: "text-sm text-destructive",
-              children: errors.type
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              htmlFor: "thing-name",
-              className: "text-sm font-medium text-foreground",
-              children: [
-                "Name ",
-                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: "thing-name",
-              "data-testid": "thing-name-input",
-              type: "text",
-              value: formData.name,
-              onChange: (e) => handleChange("name", e.target.value),
-              onKeyDown: handleKeyDown,
-              disabled: isSubmitting,
-              placeholder: "Enter a name",
-              "aria-invalid": Boolean(errors.name),
-              "aria-describedby": errors.name ? "name-error" : void 0,
-              className: cn(
-                "h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
-                errors.name ? "border-destructive focus-visible:ring-destructive" : "border-input"
-              )
-            }
-          ),
-          errors.name && /* @__PURE__ */ jsx(
-            "p",
-            {
-              id: "name-error",
-              "data-testid": "field-error-name",
-              className: "text-sm text-destructive",
-              children: errors.name
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: "thing-description",
-              className: "text-sm font-medium text-foreground",
-              children: "Description"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              id: "thing-description",
-              "data-testid": "thing-description-input",
-              value: formData.description,
-              onChange: (e) => handleChange("description", e.target.value),
-              disabled: isSubmitting,
-              placeholder: "Optional description",
-              rows: 3,
-              className: cn(
-                "w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-colors",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
-                "border-input resize-none"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "data-testid": "thing-cancel-btn",
-              onClick: onCancel,
-              disabled: isSubmitting,
-              className: cn(
-                "h-9 rounded-md px-4 text-sm font-medium",
-                "border border-input bg-background",
-                "hover:bg-accent hover:text-accent-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50"
-              ),
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              "data-testid": "thing-submit-btn",
-              disabled: isSubmitting,
-              className: cn(
-                "h-9 rounded-md px-4 text-sm font-medium",
-                "bg-primary text-primary-foreground",
-                "hover:bg-primary/90",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50"
-              ),
-              children: isSubmitting ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-testid": "submit-loading",
-                    className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
-                  }
-                ),
-                isEditMode ? "Saving..." : "Creating..."
-              ] }) : isEditMode ? "Save" : "Create"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function ThingFormDialog({
-  open,
-  thing,
-  onClose,
-  onSubmit,
-  isSubmitting = false
-}) {
-  const isEditMode = Boolean(thing);
-  const dialogRef = React9.useRef(null);
-  React9.useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape" && open && !isSubmitting) {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, isSubmitting, onClose]);
-  React9.useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-  React9.useEffect(() => {
-    if (open && dialogRef.current) {
-      const focusableElements = dialogRef.current.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-      const handleTabKey = (e) => {
-        if (e.key === "Tab") {
-          if (e.shiftKey && document.activeElement === firstElement) {
-            e.preventDefault();
-            lastElement?.focus();
-          } else if (!e.shiftKey && document.activeElement === lastElement) {
-            e.preventDefault();
-            firstElement?.focus();
-          }
-        }
-      };
-      document.addEventListener("keydown", handleTabKey);
-      return () => document.removeEventListener("keydown", handleTabKey);
-    }
-  }, [open]);
-  if (!open) {
-    return null;
-  }
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget && !isSubmitting) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-testid": "dialog-backdrop",
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
-      onClick: handleBackdropClick,
-      role: "presentation",
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: dialogRef,
-          "data-testid": "thing-form-dialog",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": "dialog-title",
-          className: cn(
-            "relative w-full max-w-md rounded-lg border bg-background p-6 shadow-lg",
-            "animate-in fade-in-0 zoom-in-95 duration-200"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                disabled: isSubmitting,
-                className: cn(
-                  "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity",
-                  "hover:opacity-100",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "disabled:cursor-not-allowed disabled:opacity-50"
-                ),
-                "aria-label": "Close dialog",
-                children: /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  id: "dialog-title",
-                  "data-testid": "dialog-title",
-                  className: "text-lg font-semibold text-foreground",
-                  children: isEditMode ? "Edit Thing" : "Create New Thing"
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: isEditMode ? "Update the details of this Thing." : "Fill in the details to create a new Thing." })
-            ] }),
-            /* @__PURE__ */ jsx(
-              ThingForm,
-              {
-                thing,
-                onSubmit,
-                onCancel: onClose,
-                isSubmitting
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  destructive = false,
-  onConfirm,
-  onCancel,
-  isConfirming = false
-}) {
-  const dialogRef = React9.useRef(null);
-  const confirmButtonRef = React9.useRef(null);
-  React9.useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape" && open && !isConfirming) {
-        onCancel();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, isConfirming, onCancel]);
-  React9.useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && open && !isConfirming) {
-        e.preventDefault();
-        onConfirm();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, isConfirming, onConfirm]);
-  React9.useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-  React9.useEffect(() => {
-    if (open && confirmButtonRef.current) {
-      confirmButtonRef.current.focus();
-    }
-  }, [open]);
-  React9.useEffect(() => {
-    if (open && dialogRef.current) {
-      const focusableElements = dialogRef.current.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-      const handleTabKey = (e) => {
-        if (e.key === "Tab") {
-          if (e.shiftKey && document.activeElement === firstElement) {
-            e.preventDefault();
-            lastElement?.focus();
-          } else if (!e.shiftKey && document.activeElement === lastElement) {
-            e.preventDefault();
-            firstElement?.focus();
-          }
-        }
-      };
-      document.addEventListener("keydown", handleTabKey);
-      return () => document.removeEventListener("keydown", handleTabKey);
-    }
-  }, [open]);
-  if (!open) {
-    return null;
-  }
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget && !isConfirming) {
-      onCancel();
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-testid": "dialog-backdrop",
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
-      onClick: handleBackdropClick,
-      role: "presentation",
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: dialogRef,
-          "data-testid": "confirm-dialog",
-          role: "alertdialog",
-          "aria-modal": "true",
-          "aria-labelledby": "confirm-dialog-title",
-          "aria-describedby": "confirm-dialog-description",
-          className: cn(
-            "relative w-full max-w-md rounded-lg border bg-background p-6 shadow-lg",
-            "animate-in fade-in-0 zoom-in-95 duration-200"
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  id: "confirm-dialog-title",
-                  className: "text-lg font-semibold text-foreground",
-                  children: title
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  id: "confirm-dialog-description",
-                  className: "mt-2 text-sm text-muted-foreground",
-                  children: message
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": "confirm-dialog-cancel",
-                  onClick: onCancel,
-                  disabled: isConfirming,
-                  className: cn(
-                    "h-9 rounded-md px-4 text-sm font-medium",
-                    "border border-input bg-background",
-                    "hover:bg-accent hover:text-accent-foreground",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    "disabled:cursor-not-allowed disabled:opacity-50"
-                  ),
-                  children: cancelText
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  ref: confirmButtonRef,
-                  type: "button",
-                  "data-testid": "confirm-dialog-confirm",
-                  "data-variant": destructive ? "destructive" : "default",
-                  onClick: onConfirm,
-                  disabled: isConfirming,
-                  className: cn(
-                    "h-9 rounded-md px-4 text-sm font-medium",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    "disabled:cursor-not-allowed disabled:opacity-50",
-                    destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90"
-                  ),
-                  children: isConfirming ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-testid": "confirm-loading",
-                        className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
-                      }
-                    ),
-                    confirmText,
-                    "..."
-                  ] }) : confirmText
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-function ToastNotification({ toast, onDismiss }) {
-  const iconsByType = {
-    success: /* @__PURE__ */ jsx(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
-      }
-    ),
-    error: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: [
-          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
-          /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
-        ]
-      }
-    ),
-    info: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: [
-          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-          /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
-        ]
-      }
-    ),
-    warning: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: [
-          /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-          /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-          /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
-        ]
-      }
-    )
-  };
-  const stylesByType = {
-    success: "border-green-500/50 bg-green-50 text-green-900 dark:bg-green-900/20 dark:text-green-100",
-    error: "border-destructive/50 bg-destructive/10 text-destructive dark:bg-destructive/20",
-    info: "border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-900/20 dark:text-blue-100",
-    warning: "border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-900/20 dark:text-yellow-100"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": `toast-${toast.type}`,
-      role: "alert",
-      className: cn(
-        "pointer-events-auto flex items-center gap-3 rounded-lg border p-4 shadow-lg",
-        "animate-in slide-in-from-top-5 fade-in duration-300",
-        stylesByType[toast.type]
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: iconsByType[toast.type] }),
-        /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm", children: toast.message }),
-        toast.action && /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-testid": "undo-btn",
-            onClick: () => {
-              toast.action?.onClick();
-              onDismiss(toast.id);
-            },
-            className: "flex-shrink-0 text-sm font-medium underline-offset-4 hover:underline",
-            children: toast.action.label
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onDismiss(toast.id),
-            className: "flex-shrink-0 rounded-sm opacity-70 hover:opacity-100",
-            "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "14",
-                height: "14",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function ToastContainer({
-  toasts,
-  onDismiss,
-  position = "top-right"
-}) {
-  const positionClasses = {
-    "top-right": "top-4 right-4",
-    "top-left": "top-4 left-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "top-center": "top-4 left-1/2 -translate-x-1/2"
-  };
-  if (toasts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-testid": "toast-container",
-      className: cn(
-        "fixed z-50 flex flex-col gap-2 pointer-events-none",
-        positionClasses[position]
-      ),
-      children: toasts.map((toast) => /* @__PURE__ */ jsx(
-        ToastNotification,
-        {
-          toast,
-          onDismiss
-        },
-        toast.id
-      ))
-    }
-  );
-}
-var ToastContext = React9.createContext(null);
-function useToast() {
-  const context = React9.useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-}
-function ToastProvider({
-  children,
-  position = "top-right",
-  defaultDuration = 5e3
-}) {
-  const [toasts, setToasts] = React9.useState([]);
-  const removeToast = React9.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  const addToast = React9.useCallback(
-    (type, message, options) => {
-      const id = crypto.randomUUID();
-      const duration = options?.duration ?? defaultDuration;
-      setToasts((prev) => [...prev, { id, type, message, ...options }]);
-      if (duration > 0) {
-        setTimeout(() => removeToast(id), duration);
-      }
-    },
-    [defaultDuration, removeToast]
-  );
-  const contextValue = React9.useMemo(
-    () => ({ addToast, removeToast }),
-    [addToast, removeToast]
-  );
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
-    children,
-    /* @__PURE__ */ jsx(ToastContainer, { toasts, onDismiss: removeToast, position })
-  ] });
-}
-function ThingsPageInternal({
-  initialFilter,
-  initialSort,
-  initialPagination = { page: 1, perPage: 20 },
-  availableTypes = ["Task", "Project", "Person", "Organization", "Document", "Event"],
-  onParamsChange,
-  className
-}) {
-  const { namespace, config } = useDO();
-  const { addToast } = useToast();
-  const dataProvider = useDataProviderSafe();
-  const [filter, setFilter] = React9.useState(initialFilter ?? { ns: namespace });
-  const [sort, setSort] = React9.useState(initialSort);
-  const [pagination, setPagination] = React9.useState(initialPagination);
-  const [selectedIds, setSelectedIds] = React9.useState([]);
-  const [createDialogOpen, setCreateDialogOpen] = React9.useState(false);
-  const [editDialogOpen, setEditDialogOpen] = React9.useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = React9.useState(false);
-  const [selectedThing, setSelectedThing] = React9.useState(null);
-  const [isSubmitting, setIsSubmitting] = React9.useState(false);
-  const [isDeleting, setIsDeleting] = React9.useState(false);
-  const { data: queryResult, isLoading, refetch } = useThings(filter, sort, pagination);
-  const createThing = useCreateThing();
-  const handleFilterChange = (newFilter) => {
-    setFilter(newFilter);
-    setPagination({ ...pagination, page: 1 });
-    onParamsChange?.({ filter: newFilter, sort, pagination: { ...pagination, page: 1 } });
-  };
-  const handleSortChange = (newSort) => {
-    setSort(newSort);
-    onParamsChange?.({ filter, sort: newSort, pagination });
-  };
-  const handlePaginationChange = (newPagination) => {
-    setPagination(newPagination);
-    onParamsChange?.({ filter, sort, pagination: newPagination });
-  };
-  const handleThingSelect = (thing, selected) => {
-    setSelectedIds(
-      (prev) => selected ? [...prev, thing.id] : prev.filter((id) => id !== thing.id)
-    );
-  };
-  const handleAction = (thing, action) => {
-    setSelectedThing(thing);
-    switch (action) {
-      case "edit":
-        setEditDialogOpen(true);
-        break;
-      case "delete":
-        setDeleteDialogOpen(true);
-        break;
-      case "view":
-        console.log("View thing:", thing);
-        break;
-      case "history":
-        console.log("View history:", thing);
-        break;
-    }
-  };
-  const handleCreate = async (data) => {
-    setIsSubmitting(true);
-    try {
-      await createThing.mutateAsync({
-        ns: namespace,
-        type: data.type,
-        name: data.name,
-        data: data.description ? { description: data.description } : {}
-      });
-      setCreateDialogOpen(false);
-      addToast("success", `${data.name} created successfully`);
-      refetch();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to create";
-      addToast("error", message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const handleEdit = async (data) => {
-    if (!selectedThing) return;
-    setIsSubmitting(true);
-    try {
-      if (dataProvider) {
-        const updateData = {
-          name: data.name,
-          data: data.description ? { description: data.description } : void 0
-        };
-        await dataProvider.update("Thing", {
-          id: selectedThing.id,
-          data: {
-            ns: selectedThing.ns,
-            type: selectedThing.type,
-            ...updateData
-          }
-        });
-      } else {
-        const response = await fetch(
-          `${config.apiEndpoint}/things/${encodeURIComponent(selectedThing.ns)}/${encodeURIComponent(selectedThing.type)}/${encodeURIComponent(selectedThing.id)}`,
-          {
-            method: "PATCH",
-            headers: {
-              "Content-Type": "application/json",
-              ...config.authToken ? { Authorization: `Bearer ${config.authToken}` } : {}
-            },
-            body: JSON.stringify({
-              name: data.name,
-              data: data.description ? { description: data.description } : void 0
-            })
-          }
-        );
-        if (!response.ok) throw new Error("Failed to update thing");
-      }
-      setEditDialogOpen(false);
-      setSelectedThing(null);
-      addToast("success", `${data.name} updated successfully`);
-      refetch();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to update";
-      addToast("error", message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const handleDelete = async () => {
-    if (!selectedThing) return;
-    setIsDeleting(true);
-    try {
-      if (dataProvider) {
-        await dataProvider.delete("Thing", { id: selectedThing.id });
-      } else {
-        const response = await fetch(
-          `${config.apiEndpoint}/things/${encodeURIComponent(selectedThing.ns)}/${encodeURIComponent(selectedThing.type)}/${encodeURIComponent(selectedThing.id)}`,
-          {
-            method: "DELETE",
-            headers: config.authToken ? { Authorization: `Bearer ${config.authToken}` } : {}
-          }
-        );
-        if (!response.ok) throw new Error("Failed to delete thing");
-      }
-      setDeleteDialogOpen(false);
-      const deletedName = selectedThing.name;
-      setSelectedThing(null);
-      setSelectedIds((prev) => prev.filter((id) => id !== selectedThing.id));
-      addToast("success", `${deletedName} deleted`, {
-        action: {
-          label: "Undo",
-          onClick: () => {
-            console.log("Undo delete");
-          }
-        }
-      });
-      refetch();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to delete";
-      addToast("error", message);
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx(
-      ThingsList,
-      {
-        things: queryResult?.data ?? [],
-        total: queryResult?.total ?? 0,
-        loading: isLoading,
-        selectedIds,
-        filter,
-        sort,
-        pagination,
-        availableTypes,
-        onFilterChange: handleFilterChange,
-        onSortChange: handleSortChange,
-        onPaginationChange: handlePaginationChange,
-        onThingSelect: handleThingSelect,
-        onAction: handleAction,
-        onCreate: () => setCreateDialogOpen(true)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ThingFormDialog,
-      {
-        open: createDialogOpen,
-        onClose: () => setCreateDialogOpen(false),
-        onSubmit: handleCreate,
-        isSubmitting
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ThingFormDialog,
-      {
-        open: editDialogOpen,
-        thing: selectedThing ?? void 0,
-        onClose: () => {
-          setEditDialogOpen(false);
-          setSelectedThing(null);
-        },
-        onSubmit: handleEdit,
-        isSubmitting
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        open: deleteDialogOpen,
-        title: "Delete Thing",
-        message: `Are you sure you want to delete "${selectedThing?.name}"? This action cannot be undone.`,
-        confirmText: "Delete",
-        destructive: true,
-        onConfirm: handleDelete,
-        onCancel: () => {
-          setDeleteDialogOpen(false);
-          setSelectedThing(null);
-        },
-        isConfirming: isDeleting
-      }
-    )
-  ] });
-}
-function ThingsPage(props) {
-  return /* @__PURE__ */ jsx(ToastProvider, { position: "top-right", children: /* @__PURE__ */ jsx(ThingsPageInternal, { ...props }) });
-}
-var STATUS_COLORS = {
-  active: "bg-green-500/10 text-green-600 dark:text-green-400",
-  draft: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-  deprecated: "bg-orange-500/10 text-orange-600 dark:text-orange-400",
-  archived: "bg-muted text-muted-foreground"
-};
-function WorkflowsList({
-  workflows,
-  total,
-  loading = false,
-  filter,
-  onFilterChange,
-  onWorkflowClick,
-  onTriggerWorkflow,
-  onCreate,
-  className
-}) {
-  const [searchValue, setSearchValue] = React9.useState(filter?.nameSearch || "");
-  const [openMenuId, setOpenMenuId] = React9.useState(null);
-  const handleSearch = (value) => {
-    setSearchValue(value);
-    onFilterChange?.({ ...filter, nameSearch: value || void 0 });
-  };
-  const handleStatusFilter = (e) => {
-    const value = e.target.value;
-    if (value === "all") {
-      onFilterChange?.({ ...filter, status: void 0 });
-    } else {
-      onFilterChange?.({ ...filter, status: [value] });
-    }
-  };
-  if (!loading && workflows.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-border p-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                placeholder: "Search workflows...",
-                value: searchValue,
-                onChange: (e) => handleSearch(e.target.value),
-                className: cn(
-                  "h-9 w-64 rounded-md border border-input bg-background pl-9 pr-4 text-sm",
-                  "placeholder:text-muted-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              "data-testid": "status-filter",
-              value: filter?.status?.[0] || "all",
-              onChange: handleStatusFilter,
-              className: cn(
-                "h-9 rounded-md border border-input bg-background px-3 text-sm",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "all", children: "All Statuses" }),
-                /* @__PURE__ */ jsx("option", { value: "active", children: "Active" }),
-                /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft" }),
-                /* @__PURE__ */ jsx("option", { value: "deprecated", children: "Deprecated" }),
-                /* @__PURE__ */ jsx("option", { value: "archived", children: "Archived" })
-              ]
-            }
-          )
-        ] }),
-        onCreate && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "data-testid": "create-workflow-btn",
-            onClick: onCreate,
-            className: cn(
-              "flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground",
-              "hover:bg-primary/90"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-              "Create Workflow"
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "workflows-empty-state",
-          className: "flex flex-1 flex-col items-center justify-center p-12 text-center",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(Play, { className: "h-8 w-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No workflows found" }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4 max-w-sm", children: "Workflows orchestrate multi-step business processes. Create your first workflow to get started." }),
-            onCreate && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: onCreate,
-                className: cn(
-                  "flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
-                  "hover:bg-primary/90"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-                  "Create Workflow"
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-border p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "Search workflows...",
-              value: searchValue,
-              onChange: (e) => handleSearch(e.target.value),
-              className: cn(
-                "h-9 w-64 rounded-md border border-input bg-background pl-9 pr-4 text-sm",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            "data-testid": "status-filter",
-            value: filter?.status?.[0] || "all",
-            onChange: handleStatusFilter,
-            className: cn(
-              "h-9 rounded-md border border-input bg-background px-3 text-sm",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            ),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "all", children: "All Statuses" }),
-              /* @__PURE__ */ jsx("option", { value: "active", children: "Active" }),
-              /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft" }),
-              /* @__PURE__ */ jsx("option", { value: "deprecated", children: "Deprecated" }),
-              /* @__PURE__ */ jsx("option", { value: "archived", children: "Archived" })
-            ]
-          }
-        )
-      ] }),
-      onCreate && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "data-testid": "create-workflow-btn",
-          onClick: onCreate,
-          className: cn(
-            "flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground",
-            "hover:bg-primary/90"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-            "Create Workflow"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("table", { "data-testid": "workflows-table", className: "w-full", children: [
-      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Name" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Status" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Trigger" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Last Execution" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Executions" }),
-        /* @__PURE__ */ jsx("th", { className: "w-24 p-4" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: loading ? (
-        // Loading skeleton
-        Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("tr", { className: "animate-pulse border-b border-border", children: [
-          /* @__PURE__ */ jsxs("td", { className: "p-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-48 rounded bg-muted mb-1" }),
-            /* @__PURE__ */ jsx("div", { className: "h-3 w-64 rounded bg-muted" })
-          ] }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-16 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-20 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-12 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4" })
-        ] }, i))
-      ) : workflows.map((workflow) => /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          "data-testid": "workflow-row",
-          className: "cursor-pointer border-b border-border hover:bg-muted/50",
-          onClick: () => onWorkflowClick?.(workflow),
-          children: [
-            /* @__PURE__ */ jsxs("td", { className: "p-4", children: [
-              /* @__PURE__ */ jsx("div", { "data-testid": "workflow-name", className: "font-medium", children: workflow.name }),
-              /* @__PURE__ */ jsx("div", { "data-testid": "workflow-description", className: "text-sm text-muted-foreground", children: workflow.description })
-            ] }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-testid": "workflow-status-badge",
-                className: cn(
-                  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
-                  STATUS_COLORS[workflow.status]
-                ),
-                children: workflow.status
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-1 text-xs font-medium", children: workflow.trigger.type }) }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-testid": "workflow-last-execution",
-                className: "text-sm text-muted-foreground",
-                children: workflow.updatedAt ? formatRelativeTime(workflow.updatedAt) : "Never"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-testid": "workflow-execution-count",
-                className: "text-sm",
-                children: formatNumber(0)
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "p-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              workflow.status === "active" && onTriggerWorkflow && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  "data-testid": "trigger-workflow-btn",
-                  onClick: () => onTriggerWorkflow(workflow),
-                  className: cn(
-                    "flex h-8 items-center gap-1 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground",
-                    "hover:bg-primary/90"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }),
-                    "Trigger"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => setOpenMenuId(openMenuId === workflow.id ? null : workflow.id),
-                    className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
-                    children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
-                  }
-                ),
-                openMenuId === workflow.id && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "fixed inset-0 z-40",
-                      onClick: () => setOpenMenuId(null)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-1 w-36 rounded-md border border-border bg-popover py-1 shadow-lg", children: /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => {
-                        onWorkflowClick?.(workflow);
-                        setOpenMenuId(null);
-                      },
-                      className: "flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
-                      children: [
-                        /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
-                        " View"
-                      ]
-                    }
-                  ) })
-                ] })
-              ] })
-            ] }) })
-          ]
-        },
-        workflow.id
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-t border-border p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-      "Showing ",
-      workflows.length,
-      " of ",
-      total,
-      " workflows"
-    ] }) })
-  ] });
-}
-var STATUS_ICONS = {
-  pending: Clock,
-  running: Loader2,
-  completed: CheckCircle2,
-  failed: XCircle,
-  cancelled: StopCircle,
-  compensating: RefreshCw,
-  compensated: CheckCircle2
-};
-var STATUS_COLORS2 = {
-  pending: "text-yellow-500",
-  running: "text-blue-500",
-  completed: "text-green-500",
-  failed: "text-red-500",
-  cancelled: "text-gray-500",
-  compensating: "text-orange-500",
-  compensated: "text-green-500"
-};
-var STATUS_BG_COLORS = {
-  pending: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-  running: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
-  completed: "bg-green-500/10 text-green-600 dark:text-green-400",
-  failed: "bg-red-500/10 text-red-600 dark:text-red-400",
-  cancelled: "bg-muted text-muted-foreground",
-  compensating: "bg-orange-500/10 text-orange-600 dark:text-orange-400",
-  compensated: "bg-green-500/10 text-green-600 dark:text-green-400"
-};
-function StepItem({
-  step,
-  expanded,
-  onToggle
-}) {
-  const StatusIcon = STATUS_ICONS[step.status];
-  const isRunning = step.status === "running";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": "step-item",
-      "data-status": step.status,
-      className: "border border-border rounded-lg overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: onToggle,
-            className: "flex w-full items-center gap-3 p-4 text-left hover:bg-muted/50",
-            children: [
-              /* @__PURE__ */ jsx(
-                StatusIcon,
-                {
-                  className: cn(
-                    "h-5 w-5",
-                    STATUS_COLORS2[step.status],
-                    isRunning && "animate-spin"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: "font-medium truncate", children: step.stepName }),
-                /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-                  "Step ID: ",
-                  step.stepId
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { "data-testid": "step-status", className: "text-sm text-muted-foreground", children: step.status }),
-              step.durationMs !== void 0 && /* @__PURE__ */ jsx("div", { "data-testid": "step-duration", className: "text-sm text-muted-foreground", children: formatDuration(step.durationMs) }),
-              expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
-            ]
-          }
-        ),
-        expanded && /* @__PURE__ */ jsxs("div", { "data-testid": "step-details", className: "border-t border-border p-4 bg-muted/30", children: [
-          step.error && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-testid": "step-error",
-              className: "mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-md",
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-red-600 dark:text-red-400 font-medium mb-1", children: [
-                  /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-                  "Error"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600/80 dark:text-red-400/80", children: step.error.message })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-2", children: "Input" }),
-              /* @__PURE__ */ jsx(
-                "pre",
-                {
-                  "data-testid": "step-input",
-                  className: "text-xs bg-background border border-border rounded-md p-3 overflow-auto max-h-48",
-                  children: JSON.stringify(step.input, null, 2)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-2", children: "Output" }),
-              /* @__PURE__ */ jsx(
-                "pre",
-                {
-                  "data-testid": "step-output",
-                  className: "text-xs bg-background border border-border rounded-md p-3 overflow-auto max-h-48",
-                  children: step.output ? JSON.stringify(step.output, null, 2) : "No output yet"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-6 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              "Started: ",
-              formatDateTime(step.startedAt)
-            ] }),
-            step.completedAt && /* @__PURE__ */ jsxs("div", { children: [
-              "Completed: ",
-              formatDateTime(step.completedAt)
-            ] }),
-            step.retryCount > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              "Retries: ",
-              step.retryCount
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-function WorkflowExecutionView({
-  workflow,
-  execution,
-  executions = [],
-  loading = false,
-  activeTab = "details",
-  onTabChange,
-  onExecutionClick,
-  onCancelExecution,
-  onRetryExecution,
-  className
-}) {
-  const [expandedSteps, setExpandedSteps] = React9.useState(/* @__PURE__ */ new Set());
-  const [showCancelConfirm, setShowCancelConfirm] = React9.useState(false);
-  const toggleStep = (stepId) => {
-    const newExpanded = new Set(expandedSteps);
-    if (newExpanded.has(stepId)) {
-      newExpanded.delete(stepId);
-    } else {
-      newExpanded.add(stepId);
-    }
-    setExpandedSteps(newExpanded);
-  };
-  const handleCancel = () => {
-    if (execution) {
-      onCancelExecution?.(execution.id);
-      setShowCancelConfirm(false);
-    }
-  };
-  const canCancel = execution && (execution.status === "running" || execution.status === "pending");
-  const canRetry = execution && execution.status === "failed";
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    execution && /* @__PURE__ */ jsxs("div", { className: "border-b border-border p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: workflow.name }),
-          /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-            "Execution: ",
-            execution.id
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              "data-testid": "execution-status",
-              className: cn(
-                "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium",
-                STATUS_BG_COLORS[execution.status]
-              ),
-              children: [
-                React9.createElement(STATUS_ICONS[execution.status], {
-                  className: cn(
-                    "h-4 w-4",
-                    execution.status === "running" && "animate-spin"
-                  )
-                }),
-                execution.status
-              ]
-            }
-          ),
-          canCancel && onCancelExecution && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              "data-testid": "cancel-execution-btn",
-              onClick: () => setShowCancelConfirm(true),
-              className: cn(
-                "flex items-center gap-2 rounded-md border border-destructive px-3 py-1 text-sm font-medium text-destructive",
-                "hover:bg-destructive/10"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(StopCircle, { className: "h-4 w-4" }),
-                "Cancel"
-              ]
-            }
-          ),
-          canRetry && onRetryExecution && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              "data-testid": "retry-execution-btn",
-              onClick: () => onRetryExecution(execution),
-              className: cn(
-                "flex items-center gap-2 rounded-md bg-primary px-3 py-1 text-sm font-medium text-primary-foreground",
-                "hover:bg-primary/90"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
-                "Retry"
-              ]
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-6 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("div", { "data-testid": "execution-start-time", children: [
-          "Started: ",
-          formatDateTime(execution.startedAt)
-        ] }),
-        execution.completedAt && /* @__PURE__ */ jsxs("div", { "data-testid": "execution-end-time", children: [
-          "Completed: ",
-          formatDateTime(execution.completedAt)
-        ] }),
-        execution.durationMs !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
-          "Duration: ",
-          formatDuration(execution.durationMs)
-        ] })
-      ] }),
-      execution.error && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "execution-error",
-          className: "mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-md",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-red-600 dark:text-red-400 font-medium mb-1", children: [
-              /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-              "Execution Error"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600/80 dark:text-red-400/80", children: execution.error.message })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 px-4", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onTabChange?.("details"),
-          className: cn(
-            "py-3 text-sm font-medium border-b-2 -mb-px",
-            activeTab === "details" ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
-          ),
-          children: "Details"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          "data-testid": "executions-tab",
-          onClick: () => onTabChange?.("executions"),
-          className: cn(
-            "py-3 text-sm font-medium border-b-2 -mb-px",
-            activeTab === "executions" ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
-          ),
-          children: "Executions"
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4", children: [
-      activeTab === "details" && execution && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { "data-testid": "execution-timeline", className: "mb-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-3", children: "Timeline" }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-x-auto pb-2", children: execution.steps.map((step, index) => {
-            const StatusIcon = STATUS_ICONS[step.status];
-            const widthPercent = execution.durationMs ? Math.max(10, (step.durationMs || 0) / execution.durationMs * 100) : 100 / execution.steps.length;
-            return /* @__PURE__ */ jsxs(React9.Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "flex items-center gap-2 px-3 py-2 rounded-md border",
-                    step.status === "completed" && "border-green-500/30 bg-green-500/5",
-                    step.status === "running" && "border-blue-500/30 bg-blue-500/5",
-                    step.status === "failed" && "border-red-500/30 bg-red-500/5",
-                    step.status === "pending" && "border-border bg-muted/30"
-                  ),
-                  style: { minWidth: `${Math.max(widthPercent, 15)}%` },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      StatusIcon,
-                      {
-                        className: cn(
-                          "h-4 w-4 flex-shrink-0",
-                          STATUS_COLORS2[step.status],
-                          step.status === "running" && "animate-spin"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: step.stepName })
-                  ]
-                }
-              ),
-              index < execution.steps.length - 1 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" })
-            ] }, step.stepId);
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { "data-testid": "step-list", className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
-            "Steps (",
-            execution.steps.length,
-            ")"
-          ] }),
-          execution.steps.map((step) => /* @__PURE__ */ jsx(
-            StepItem,
-            {
-              step,
-              expanded: expandedSteps.has(step.stepId),
-              onToggle: () => toggleStep(step.stepId)
-            },
-            step.stepId
-          ))
-        ] })
-      ] }),
-      activeTab === "executions" && /* @__PURE__ */ jsx(Fragment, { children: loading ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "animate-pulse p-4 border border-border rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-6 w-20 rounded bg-muted" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-32 rounded bg-muted" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted ml-auto" })
-      ] }) }, i)) }) : executions.length === 0 ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "executions-empty-state",
-          className: "flex flex-col items-center justify-center py-12 text-center",
-          children: [
-            /* @__PURE__ */ jsx(Clock, { className: "h-12 w-12 text-muted-foreground mb-4" }),
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No executions yet" }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "This workflow has not been executed. Trigger it to see execution history." })
-          ]
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: executions.map((exec) => {
-        const StatusIcon = STATUS_ICONS[exec.status];
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-testid": "execution-row",
-            onClick: () => onExecutionClick?.(exec),
-            className: "flex items-center gap-4 p-4 border border-border rounded-lg cursor-pointer hover:bg-muted/50",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  "data-testid": "execution-status",
-                  className: cn(
-                    "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
-                    STATUS_BG_COLORS[exec.status]
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      StatusIcon,
-                      {
-                        className: cn(
-                          "h-3.5 w-3.5",
-                          exec.status === "running" && "animate-spin"
-                        )
-                      }
-                    ),
-                    exec.status
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium truncate", children: exec.id }),
-                /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-                  "Triggered by: ",
-                  exec.trigger.source
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-testid": "execution-timestamp",
-                  className: "text-sm text-muted-foreground",
-                  children: formatRelativeTime(exec.startedAt)
-                }
-              ),
-              exec.durationMs !== void 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-testid": "execution-duration",
-                  className: "text-sm text-muted-foreground",
-                  children: formatDuration(exec.durationMs)
-                }
-              ),
-              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
-            ]
-          },
-          exec.id
-        );
-      }) }) })
-    ] }),
-    showCancelConfirm && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
-          onClick: () => setShowCancelConfirm(false)
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "cancel-confirm-dialog",
-          className: "relative z-50 w-full max-w-md rounded-lg border border-border bg-background p-6 shadow-lg",
-          children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Cancel Execution" }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: "Are you sure you want to cancel this workflow execution? This action cannot be undone." }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "data-testid": "dismiss-cancel-btn",
-                  onClick: () => setShowCancelConfirm(false),
-                  className: "px-4 py-2 text-sm font-medium rounded-md hover:bg-accent",
-                  children: "Keep Running"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "data-testid": "confirm-cancel-btn",
-                  onClick: handleCancel,
-                  className: "px-4 py-2 text-sm font-medium rounded-md bg-destructive text-destructive-foreground hover:bg-destructive/90",
-                  children: "Cancel Execution"
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-function TriggerWorkflowDialog({
-  workflow,
-  open,
-  loading = false,
-  onClose,
-  onTrigger,
-  className
-}) {
-  const [inputValue, setInputValue] = React9.useState("{}");
-  const [parseError, setParseError] = React9.useState(null);
-  React9.useEffect(() => {
-    if (open) {
-      setInputValue("{}");
-      setParseError(null);
-    }
-  }, [open]);
-  const handleInputChange = (value) => {
-    setInputValue(value);
-    try {
-      JSON.parse(value);
-      setParseError(null);
-    } catch {
-      setParseError("Invalid JSON format");
-    }
-  };
-  const handleTrigger = () => {
-    try {
-      const parsed = JSON.parse(inputValue);
-      onTrigger(parsed);
-    } catch {
-      setParseError("Invalid JSON format");
-    }
-  };
-  const handleKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && !parseError && !loading) {
-      handleTrigger();
-    }
-    if (e.key === "Escape") {
-      onClose();
-    }
-  };
-  if (!open) return null;
-  const manualTrigger = workflow.trigger.type === "manual" ? workflow.trigger : null;
-  const hasInputSchema = manualTrigger && "inputSchema" in manualTrigger && manualTrigger.inputSchema;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "trigger-dialog",
-        className: cn(
-          "relative z-50 w-full max-w-lg rounded-lg border border-border bg-background shadow-lg",
-          className
-        ),
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-6 py-4", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Trigger Workflow" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: workflow.name })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onClose,
-                className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
-                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: workflow.description || "Trigger this workflow manually with optional input parameters." }) }),
-            hasInputSchema && manualTrigger && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-muted/50 rounded-md", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-1", children: "Expected Input Schema" }),
-              /* @__PURE__ */ jsx("pre", { className: "text-xs text-muted-foreground overflow-auto", children: JSON.stringify(manualTrigger.inputSchema, null, 2) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "trigger-input", className: "text-sm font-medium mb-2 block", children: "Input Parameters (JSON)" }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  id: "trigger-input",
-                  "data-testid": "trigger-input",
-                  value: inputValue,
-                  onChange: (e) => handleInputChange(e.target.value),
-                  placeholder: '{"key": "value"}',
-                  rows: 6,
-                  className: cn(
-                    "w-full rounded-md border bg-background px-3 py-2 font-mono text-sm",
-                    "placeholder:text-muted-foreground",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    parseError ? "border-destructive" : "border-input"
-                  )
-                }
-              ),
-              parseError && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-destructive", children: parseError }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Press Cmd/Ctrl + Enter to trigger" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border px-6 py-4", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "data-testid": "trigger-cancel-btn",
-                onClick: onClose,
-                disabled: loading,
-                className: cn(
-                  "px-4 py-2 text-sm font-medium rounded-md hover:bg-accent",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "data-testid": "trigger-confirm-btn",
-                onClick: handleTrigger,
-                disabled: loading || !!parseError,
-                className: cn(
-                  "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md",
-                  "bg-primary text-primary-foreground hover:bg-primary/90",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-                  "Triggering..."
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
-                  "Trigger Workflow"
-                ] })
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-var STATUS_COLORS3 = {
-  active: "bg-green-500",
-  draft: "bg-yellow-500",
-  paused: "bg-orange-500",
-  deprecated: "bg-gray-500",
-  archived: "bg-gray-400"
-};
-var STATUS_TEXT_COLORS = {
-  active: "text-green-600 dark:text-green-400",
-  draft: "text-yellow-600 dark:text-yellow-400",
-  paused: "text-orange-600 dark:text-orange-400",
-  deprecated: "text-gray-600 dark:text-gray-400",
-  archived: "text-gray-500"
-};
-function AgentCard({
-  agent,
-  onClick
-}) {
-  const metrics = agent.metrics;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": "agent-card",
-      onClick,
-      className: cn(
-        "flex flex-col rounded-lg border border-border bg-card p-6 cursor-pointer",
-        "transition-colors hover:bg-accent/50"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10", children: /* @__PURE__ */ jsx(Bot, { className: "h-5 w-5 text-primary" }) }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h3", { "data-testid": "agent-name", className: "font-semibold", children: agent.name }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-testid": "agent-model",
-                  className: "text-xs text-muted-foreground",
-                  children: agent.model
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn("h-2 w-2 rounded-full", STATUS_COLORS3[agent.status])
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-testid": "agent-status",
-                className: cn("text-xs font-medium", STATUS_TEXT_COLORS[agent.status]),
-                children: agent.status
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            "data-testid": "agent-description",
-            className: "text-sm text-muted-foreground mb-4 line-clamp-2",
-            children: agent.description
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-testid": "agent-metrics",
-            className: "grid grid-cols-2 gap-4 mb-4",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      "data-testid": "agent-execution-count",
-                      className: "text-sm font-medium",
-                      children: formatNumber(metrics?.totalExecutions || 0)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Executions" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      "data-testid": "agent-success-rate",
-                      className: "text-sm font-medium",
-                      children: metrics ? `${Math.round(metrics.successRate * 100)}%` : "0%"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Success Rate" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      "data-testid": "agent-response-time",
-                      className: "text-sm font-medium",
-                      children: metrics ? formatDuration(metrics.avgDurationMs) : "0ms"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Avg Response" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Zap, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: formatNumber(metrics?.avgTokenUsage || 0) }),
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Avg Tokens" })
-                ] })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "mt-auto pt-4 border-t border-border flex items-center justify-between text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx("span", { "data-testid": "agent-last-active", children: metrics?.lastExecutedAt ? `Active ${formatRelativeTime(metrics.lastExecutedAt)}` : "Never executed" }),
-          /* @__PURE__ */ jsx("span", { children: agent.type.roleCategory })
-        ] })
-      ]
-    }
-  );
-}
-function AgentsGrid({
-  agents,
-  total,
-  loading = false,
-  filter,
-  onFilterChange,
-  onAgentClick,
-  onCreate,
-  className
-}) {
-  const [searchValue, setSearchValue] = React9.useState(filter?.nameSearch || "");
-  const handleSearch = (value) => {
-    setSearchValue(value);
-    onFilterChange?.({ ...filter, nameSearch: value || void 0 });
-  };
-  const handleStatusFilter = (e) => {
-    const value = e.target.value;
-    if (value === "all") {
-      onFilterChange?.({ ...filter, status: void 0 });
-    } else {
-      onFilterChange?.({ ...filter, status: [value] });
-    }
-  };
-  if (!loading && agents.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-border p-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                "data-testid": "agents-search",
-                type: "text",
-                placeholder: "Search agents...",
-                value: searchValue,
-                onChange: (e) => handleSearch(e.target.value),
-                className: cn(
-                  "h-9 w-64 rounded-md border border-input bg-background pl-9 pr-4 text-sm",
-                  "placeholder:text-muted-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              "data-testid": "agent-status-filter",
-              value: filter?.status?.[0] || "all",
-              onChange: handleStatusFilter,
-              className: cn(
-                "h-9 rounded-md border border-input bg-background px-3 text-sm",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "all", children: "All Statuses" }),
-                /* @__PURE__ */ jsx("option", { value: "active", children: "Active" }),
-                /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft" }),
-                /* @__PURE__ */ jsx("option", { value: "paused", children: "Paused" }),
-                /* @__PURE__ */ jsx("option", { value: "deprecated", children: "Deprecated" }),
-                /* @__PURE__ */ jsx("option", { value: "archived", children: "Archived" })
-              ]
-            }
-          )
-        ] }),
-        onCreate && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "data-testid": "create-agent-btn",
-            onClick: onCreate,
-            className: cn(
-              "flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground",
-              "hover:bg-primary/90"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-              "Create Agent"
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "agents-empty-state",
-          className: "flex flex-1 flex-col items-center justify-center p-12 text-center",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(Bot, { className: "h-8 w-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No agents found" }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4 max-w-sm", children: "Agents are autonomous AI workers that can perform specialized tasks. Create your first agent to get started." }),
-            onCreate && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: onCreate,
-                className: cn(
-                  "flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
-                  "hover:bg-primary/90"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-                  "Create Agent"
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-border p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "data-testid": "agents-search",
-              type: "text",
-              placeholder: "Search agents...",
-              value: searchValue,
-              onChange: (e) => handleSearch(e.target.value),
-              className: cn(
-                "h-9 w-64 rounded-md border border-input bg-background pl-9 pr-4 text-sm",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            "data-testid": "agent-status-filter",
-            value: filter?.status?.[0] || "all",
-            onChange: handleStatusFilter,
-            className: cn(
-              "h-9 rounded-md border border-input bg-background px-3 text-sm",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            ),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "all", children: "All Statuses" }),
-              /* @__PURE__ */ jsx("option", { value: "active", children: "Active" }),
-              /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft" }),
-              /* @__PURE__ */ jsx("option", { value: "paused", children: "Paused" }),
-              /* @__PURE__ */ jsx("option", { value: "deprecated", children: "Deprecated" }),
-              /* @__PURE__ */ jsx("option", { value: "archived", children: "Archived" })
-            ]
-          }
-        )
-      ] }),
-      onCreate && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "data-testid": "create-agent-btn",
-          onClick: onCreate,
-          className: cn(
-            "flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground",
-            "hover:bg-primary/90"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-            "Create Agent"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: loading ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "agents-grid",
-        className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-        children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "animate-pulse rounded-lg border border-border p-6",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-lg bg-muted" }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-4 w-32 rounded bg-muted mb-1" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-muted" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "h-10 w-full rounded bg-muted mb-4" }),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-12 rounded bg-muted" }),
-                /* @__PURE__ */ jsx("div", { className: "h-12 rounded bg-muted" }),
-                /* @__PURE__ */ jsx("div", { className: "h-12 rounded bg-muted" }),
-                /* @__PURE__ */ jsx("div", { className: "h-12 rounded bg-muted" })
-              ] })
-            ]
-          },
-          i
-        ))
-      }
-    ) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "agents-grid",
-        className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-        children: agents.map((agent) => /* @__PURE__ */ jsx(
-          AgentCard,
-          {
-            agent,
-            onClick: () => onAgentClick?.(agent)
-          },
-          agent.id
-        ))
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-t border-border p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-      "Showing ",
-      agents.length,
-      " of ",
-      total,
-      " agents"
-    ] }) })
-  ] });
-}
-function AgentExecutePanel({
-  agent,
-  executing = false,
-  execution,
-  error,
-  onExecute,
-  onClear,
-  className
-}) {
-  const [showInput, setShowInput] = React9.useState(false);
-  const [inputValue, setInputValue] = React9.useState("");
-  const textareaRef = React9.useRef(null);
-  React9.useEffect(() => {
-    if (showInput && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [showInput]);
-  React9.useEffect(() => {
-    if (execution?.status === "completed" || execution?.status === "failed") {
-      setInputValue("");
-    }
-  }, [execution?.status]);
-  const handleExecuteClick = () => {
-    if (!showInput) {
-      setShowInput(true);
-      return;
-    }
-  };
-  const handleSubmit = () => {
-    if (inputValue.trim()) {
-      onExecute(inputValue.trim());
-    }
-  };
-  const handleKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && inputValue.trim() && !executing) {
-      handleSubmit();
-    }
-    if (e.key === "Escape") {
-      setShowInput(false);
-      setInputValue("");
-    }
-  };
-  const handleClear = () => {
-    setShowInput(false);
-    setInputValue("");
-    onClear?.();
-  };
-  const isInputEmpty = !inputValue.trim();
-  const showResults = execution || error || executing;
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "font-medium", children: "Execute Agent" }),
-      showResults && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: handleClear,
-          className: "flex h-6 w-6 items-center justify-center rounded hover:bg-accent",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-4", children: !showInput && !showResults ? (
-      // Initial state - just the button
-      /* @__PURE__ */ jsxs("div", { className: "text-center py-4", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Execute this agent with a task description to see it in action." }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "data-testid": "execute-agent-btn",
-            onClick: handleExecuteClick,
-            className: cn(
-              "flex items-center gap-2 mx-auto px-4 py-2 rounded-md",
-              "bg-primary text-primary-foreground font-medium text-sm",
-              "hover:bg-primary/90"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
-              "Execute Agent"
-            ]
-          }
-        )
-      ] })
-    ) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      showInput && !executing && !execution && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: "agent-input",
-              className: "text-sm font-medium mb-2 block",
-              children: "Task Description"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              ref: textareaRef,
-              id: "agent-input",
-              "data-testid": "agent-input-textarea",
-              value: inputValue,
-              onChange: (e) => setInputValue(e.target.value),
-              onKeyDown: handleKeyDown,
-              placeholder: "Describe the task you want the agent to perform...",
-              rows: 4,
-              className: cn(
-                "w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Press Cmd/Ctrl + Enter to execute" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                setShowInput(false);
-                setInputValue("");
-              },
-              className: "px-4 py-2 text-sm font-medium rounded-md hover:bg-accent",
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              "data-testid": "submit-execution-btn",
-              onClick: handleSubmit,
-              disabled: isInputEmpty,
-              className: cn(
-                "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md",
-                "bg-primary text-primary-foreground hover:bg-primary/90",
-                "disabled:opacity-50 disabled:cursor-not-allowed"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
-                "Execute"
-              ]
-            }
-          )
-        ] })
-      ] }),
-      executing && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "execution-progress",
-          className: "flex flex-col items-center justify-center py-8",
-          children: [
-            /* @__PURE__ */ jsx("div", { "data-testid": "execution-loading", className: "relative mb-4", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }) }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "Executing Agent..." }),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-              agent.name,
-              " is working on your task"
-            ] })
-          ]
-        }
-      ),
-      error && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "execution-error",
-          className: "p-4 bg-red-500/10 border border-red-500/20 rounded-md",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-red-600 dark:text-red-400 font-medium mb-2", children: [
-              /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-              "Execution Failed"
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600/80 dark:text-red-400/80", children: error }),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                "data-testid": "retry-execution-btn",
-                onClick: () => {
-                  setShowInput(true);
-                },
-                className: cn(
-                  "mt-3 flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md",
-                  "border border-red-500/30 text-red-600 dark:text-red-400",
-                  "hover:bg-red-500/10"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }),
-                  "Try Again"
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      error?.toLowerCase().includes("network") && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-testid": "network-error",
-          className: "p-4 bg-red-500/10 border border-red-500/20 rounded-md",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-red-600 dark:text-red-400 font-medium mb-2", children: [
-              /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-              "Network Error"
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600/80 dark:text-red-400/80", children: "Unable to connect. Please check your internet connection and try again." })
-          ]
-        }
-      ),
-      execution?.status === "completed" && execution.output && /* @__PURE__ */ jsxs("div", { "data-testid": "execution-result", className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-green-600 dark:text-green-400", children: [
-          /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Execution Complete" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "p-4 bg-muted/50 rounded-md", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-2", children: "Summary" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: execution.output.summary })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-2", children: "Result" }),
-          /* @__PURE__ */ jsx("pre", { className: "text-xs bg-background border border-border rounded-md p-3 overflow-auto max-h-64", children: JSON.stringify(execution.output.result, null, 2) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Duration: ",
-            execution.durationMs,
-            "ms"
-          ] }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Tokens: ",
-            execution.tokenUsage.totalTokens
-          ] }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Iterations: ",
-            execution.iterations
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "data-testid": "execute-agent-btn",
-            onClick: () => {
-              setShowInput(true);
-              onClear?.();
-            },
-            className: cn(
-              "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md",
-              "bg-primary text-primary-foreground hover:bg-primary/90"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
-              "Execute Again"
-            ]
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-}
-function AgentFeedbackPanel({
-  execution,
-  submitting = false,
-  onSubmitFeedback,
-  className
-}) {
-  const [selectedRating, setSelectedRating] = React9.useState(
-    execution.feedback ? execution.feedback.rating >= 3 ? "up" : "down" : null
-  );
-  const [comment, setComment] = React9.useState(execution.feedback?.comment || "");
-  const [showCommentBox, setShowCommentBox] = React9.useState(!!execution.feedback);
-  const hasSubmittedFeedback = !!execution.feedback;
-  const isDisabled = hasSubmittedFeedback || submitting;
-  const handleRatingClick = (rating) => {
-    if (isDisabled) return;
-    if (selectedRating === rating) {
-      setSelectedRating(null);
-      setShowCommentBox(false);
-    } else {
-      setSelectedRating(rating);
-      setShowCommentBox(true);
-    }
-  };
-  const handleSubmit = () => {
-    if (!selectedRating || isDisabled) return;
-    onSubmitFeedback({
-      rating: selectedRating === "up" ? 5 : 1,
-      comment: comment.trim() || void 0
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "font-medium", children: "Feedback" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hasSubmittedFeedback ? "Thank you for your feedback!" : "Was this response helpful?" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-testid": "thumbs-up-btn",
-            "data-selected": selectedRating === "up" ? "true" : void 0,
-            onClick: () => handleRatingClick("up"),
-            disabled: isDisabled,
-            className: cn(
-              "flex h-10 w-10 items-center justify-center rounded-full border-2 transition-colors",
-              selectedRating === "up" ? "border-green-500 bg-green-500/10 text-green-600 dark:text-green-400" : "border-border text-muted-foreground hover:border-green-500/50 hover:text-green-600",
-              isDisabled && "opacity-50 cursor-not-allowed hover:border-border hover:text-muted-foreground"
-            ),
-            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "h-5 w-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-testid": "thumbs-down-btn",
-            "data-selected": selectedRating === "down" ? "true" : void 0,
-            onClick: () => handleRatingClick("down"),
-            disabled: isDisabled,
-            className: cn(
-              "flex h-10 w-10 items-center justify-center rounded-full border-2 transition-colors",
-              selectedRating === "down" ? "border-red-500 bg-red-500/10 text-red-600 dark:text-red-400" : "border-border text-muted-foreground hover:border-red-500/50 hover:text-red-600",
-              isDisabled && "opacity-50 cursor-not-allowed hover:border-border hover:text-muted-foreground"
-            ),
-            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "h-5 w-5" })
-          }
-        ),
-        hasSubmittedFeedback && execution.feedback && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-sm text-muted-foreground", children: [
-          "Rated ",
-          execution.feedback.rating >= 3 ? "positively" : "negatively"
-        ] })
-      ] }),
-      showCommentBox && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              htmlFor: "feedback-comment",
-              className: "text-sm font-medium mb-2 block",
-              children: [
-                selectedRating === "down" ? "What went wrong?" : "Any additional comments?",
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal ml-1", children: "(optional)" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              id: "feedback-comment",
-              "data-testid": "feedback-comment",
-              value: comment,
-              onChange: (e) => setComment(e.target.value),
-              placeholder: selectedRating === "down" ? "Help us improve by describing what was incorrect or unhelpful..." : "Tell us what worked well...",
-              rows: 3,
-              disabled: isDisabled,
-              className: cn(
-                "w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-                "placeholder:text-muted-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:opacity-50 disabled:cursor-not-allowed"
-              )
-            }
-          )
-        ] }),
-        !hasSubmittedFeedback && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-testid": "submit-feedback-btn",
-            onClick: handleSubmit,
-            disabled: !selectedRating || submitting,
-            className: cn(
-              "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md",
-              "bg-primary text-primary-foreground hover:bg-primary/90",
-              "disabled:opacity-50 disabled:cursor-not-allowed"
-            ),
-            children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-              "Submitting..."
-            ] }) : "Submit Feedback"
-          }
-        ) })
-      ] }),
-      hasSubmittedFeedback && execution.feedback?.comment && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-3 bg-muted/50 rounded-md", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Your comment:" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm", children: execution.feedback.comment })
-      ] })
-    ] })
-  ] });
-}
-var STATUS_ICONS2 = {
-  pending: Clock,
-  running: Loader2,
-  completed: CheckCircle2,
-  failed: XCircle,
-  cancelled: StopCircle,
-  "handed-off": ChevronRight,
-  "awaiting-human": Clock
-};
-var STATUS_COLORS4 = {
-  pending: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-  running: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
-  completed: "bg-green-500/10 text-green-600 dark:text-green-400",
-  failed: "bg-red-500/10 text-red-600 dark:text-red-400",
-  cancelled: "bg-muted text-muted-foreground",
-  "handed-off": "bg-purple-500/10 text-purple-600 dark:text-purple-400",
-  "awaiting-human": "bg-orange-500/10 text-orange-600 dark:text-orange-400"
-};
-function AgentHistoryTable({
-  executions,
-  total,
-  loading = false,
-  page = 1,
-  perPage = 10,
-  onExecutionClick,
-  onPageChange,
-  className
-}) {
-  const totalPages = Math.ceil(total / perPage);
-  if (!loading && executions.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border border-border bg-card", className), children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "history-empty-state",
-        className: "flex flex-col items-center justify-center py-12 text-center",
-        children: [
-          /* @__PURE__ */ jsx(Clock, { className: "h-12 w-12 text-muted-foreground mb-4" }),
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No execution history" }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "This agent has not been executed yet. Execute it to see history." })
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs("table", { "data-testid": "execution-history-table", className: "w-full", children: [
-      /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Status" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Time" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Duration" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Tokens" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Cost" }),
-        /* @__PURE__ */ jsx("th", { className: "p-4 text-left text-sm font-medium text-muted-foreground", children: "Feedback" }),
-        /* @__PURE__ */ jsx("th", { className: "w-8 p-4" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: loading ? (
-        // Loading skeleton
-        Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("tr", { className: "animate-pulse border-b border-border", children: [
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-20 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-20 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-8 rounded bg-muted" }) }),
-          /* @__PURE__ */ jsx("td", { className: "p-4" })
-        ] }, i))
-      ) : executions.map((execution) => {
-        const StatusIcon = STATUS_ICONS2[execution.status];
-        const isRunning = execution.status === "running";
-        return /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            "data-testid": "execution-row",
-            onClick: () => onExecutionClick?.(execution),
-            className: "cursor-pointer border-b border-border hover:bg-muted/50",
-            children: [
-              /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  "data-testid": "execution-status",
-                  className: cn(
-                    "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
-                    STATUS_COLORS4[execution.status]
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      StatusIcon,
-                      {
-                        className: cn("h-3.5 w-3.5", isRunning && "animate-spin")
-                      }
-                    ),
-                    execution.status
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("td", { className: "p-4", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-testid": "execution-timestamp",
-                    className: "text-sm",
-                    children: formatRelativeTime(execution.startedAt)
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: formatDateTime(execution.startedAt) })
-              ] }),
-              /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-testid": "execution-duration",
-                  className: "text-sm",
-                  children: execution.durationMs ? formatDuration(execution.durationMs) : "-"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("td", { className: "p-4", children: [
-                /* @__PURE__ */ jsx("div", { "data-testid": "token-usage", className: "text-sm", children: formatNumber(execution.tokenUsage.totalTokens) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxs("span", { "data-testid": "input-tokens", children: [
-                    "In: ",
-                    formatNumber(execution.tokenUsage.inputTokens)
-                  ] }),
-                  /* @__PURE__ */ jsxs("span", { "data-testid": "output-tokens", children: [
-                    "Out: ",
-                    formatNumber(execution.tokenUsage.outputTokens)
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  "data-testid": "execution-cost",
-                  className: "text-sm flex items-center gap-1",
-                  children: [
-                    /* @__PURE__ */ jsx(Coins, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-                    "$",
-                    execution.costUsd.toFixed(4)
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { "data-testid": "feedback-indicator", children: execution.feedback ? execution.feedback.rating >= 3 ? /* @__PURE__ */ jsx(ThumbsUp, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ jsx(ThumbsDown, { className: "h-4 w-4 text-red-500" }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "-" }) }) }),
-              /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }) })
-            ]
-          },
-          execution.id
-        );
-      }) })
-    ] }) }),
-    totalPages > 1 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "history-pagination",
-        className: "flex items-center justify-between border-t border-border p-4",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-            "Showing ",
-            (page - 1) * perPage + 1,
-            " to",
-            " ",
-            Math.min(page * perPage, total),
-            " of ",
-            total,
-            " executions"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                "data-testid": "pagination-prev",
-                onClick: () => onPageChange?.(page - 1),
-                disabled: page <= 1,
-                className: cn(
-                  "flex h-8 items-center gap-1 rounded-md border border-input px-3 text-sm",
-                  "hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
-                  "Previous"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "text-sm px-2", children: [
-              "Page ",
-              page,
-              " of ",
-              totalPages
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                "data-testid": "pagination-next",
-                onClick: () => onPageChange?.(page + 1),
-                disabled: page >= totalPages,
-                className: cn(
-                  "flex h-8 items-center gap-1 rounded-md border border-input px-3 text-sm",
-                  "hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                children: [
-                  "Next",
-                  /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-var DOErrorBoundary = class extends React9.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("DOErrorBoundary caught error:", error, errorInfo);
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo);
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
-      this.reset();
-    }
-  }
-  reset = () => {
-    this.setState({ hasError: false, error: null });
-  };
-  render() {
-    if (this.state.hasError) {
-      const { fallback, className } = this.props;
-      const error = this.state.error ?? new Error("Unknown error");
-      if (typeof fallback === "function") {
-        return fallback(error, this.reset);
-      }
-      if (fallback) {
-        return fallback;
-      }
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "p-6 rounded-lg bg-destructive/10 border border-destructive/20",
-            className
-          ),
-          role: "alert",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: "h-5 w-5 text-destructive",
-                viewBox: "0 0 20 20",
-                fill: "currentColor",
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
-                    clipRule: "evenodd"
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-destructive", children: "Something went wrong" }),
-              error.message && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: error.message }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: this.reset,
-                  className: "mt-4 inline-flex items-center rounded-md bg-destructive px-3 py-2 text-sm font-semibold text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-destructive",
-                  children: "Try again"
-                }
-              )
-            ] })
-          ] })
-        }
-      );
-    }
-    return this.props.children;
-  }
-};
-function useErrorBoundary() {
-  const [error, setError] = React9.useState(null);
-  if (error) {
-    throw error;
-  }
-  return {
-    showBoundary: setError
-  };
-}
-
-export { AgentExecutePanel, AgentFeedbackPanel, AgentHistoryTable, AgentsGrid, ConfirmDialog, DOErrorBoundary, DOHeader, DOShell, DOSidebar, DOSidebarHeader, StatsCards, SyncStatusIndicator, ThingForm, ThingFormDialog, ThingsList, ThingsPage, ToastContainer, ToastProvider, TriggerWorkflowDialog, WorkflowExecutionView, WorkflowsList, defaultNavItems, defaultStats, useErrorBoundary, useShell, useToast };
-//# sourceMappingURL=chunk-NXPXL5NA.js.map
-//# sourceMappingURL=chunk-NXPXL5NA.js.map