@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/{chunk-CUCKULYC.mjs → chunk-BH4FNZKK.mjs}

@@ -1,26 +1,25 @@
-import {
-  WORKFLOW_NODE_LABELS
-} from "./chunk-27JEWSWA.mjs";
 import {
   IDBlock,
   RoleBadge
-} from "./chunk-JS4IB5IU.mjs";
+} from "./chunk-DRGMEIPT.mjs";
 import {
   CereIcon
 } from "./chunk-UPGFBPFX.mjs";
 import {
   Button
-} from "./chunk-FFZ5S7PQ.mjs";
+} from "./chunk-BOQPWZIB.mjs";
 import {
   deploymentSurfaceTokens
-} from "./chunk-ATIFLPH6.mjs";
+} from "./chunk-D7D25O6E.mjs";
 import {
-  deploymentEntityColors,
-  deploymentStatusColors
-} from "./chunk-PWF2NJDB.mjs";
+  robPaletteExtended,
+  robPrimaryPalette
+} from "./chunk-WC2TCWXK.mjs";
 
 // src/components/layout/Logo.tsx
-import { Stack, styled, svgIconClasses } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import { styled } from "@mui/material/styles";
+import { svgIconClasses } from "@mui/material/SvgIcon";
 import { jsx, jsxs } from "react/jsx-runtime";
 var sizesMap = {
   large: 38,
@@ -38,18 +37,16 @@ var Logo = ({ children, size = "medium", icon = /* @__PURE__ */ jsx(CereIcon, {
 ] });
 
 // src/components/layout/Dialog.tsx
-import {
-  Dialog as MuiDialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button as Button2,
-  IconButton,
-  Box,
-  Typography,
-  Divider,
-  CircularProgress
-} from "@mui/material";
+import MuiDialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button2 from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import CircularProgress from "@mui/material/CircularProgress";
 import CloseIcon from "@mui/icons-material/Close";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Dialog = ({
@@ -365,7 +362,12 @@ var NumberedList = React3.forwardRef(
 import React4 from "react";
 import MuiDrawer from "@mui/material/Drawer";
 import { styled as styled2 } from "@mui/material/styles";
-import { Box as Box5, IconButton as IconButton2, Typography as Typography4, Divider as Divider2, Tabs, Tab } from "@mui/material";
+import Box5 from "@mui/material/Box";
+import IconButton2 from "@mui/material/IconButton";
+import Typography4 from "@mui/material/Typography";
+import Divider2 from "@mui/material/Divider";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
 import CloseIcon2 from "@mui/icons-material/Close";
 
 // src/components/layout/drawerWidth.ts
@@ -723,8 +725,22 @@ var SectionRow = React7.forwardRef(function SectionRow2({ title, subtitle, actio
 import React8 from "react";
 import Box9 from "@mui/material/Box";
 import { jsx as jsx10 } from "react/jsx-runtime";
+var GRADIENT_ANCHORS_0 = {
+  d1: robPaletteExtended.nearBlack2,
+  // #0d0627
+  d2: robPaletteExtended.nearBlack4,
+  // #23194b
+  ev: robPrimaryPalette.electricViolet,
+  // #8B00EC
+  fd: robPrimaryPalette.fandango
+  // #BD32A7
+};
 var PALETTES = [
-  { base: "linear-gradient(115deg, #0d0627 0%, #23194b 55%, #8B00EC 130%)", blobA: "#BD32A7", blobB: "#8B00EC" },
+  {
+    base: `linear-gradient(115deg, ${GRADIENT_ANCHORS_0.d1} 0%, ${GRADIENT_ANCHORS_0.d2} 55%, ${GRADIENT_ANCHORS_0.ev} 130%)`,
+    blobA: GRADIENT_ANCHORS_0.fd,
+    blobB: GRADIENT_ANCHORS_0.ev
+  },
   { base: "linear-gradient(115deg, #2a1635 0%, #5b2a55 55%, #c75a8a 130%)", blobA: "#ff7ea8", blobB: "#ffd1a8" },
   { base: "linear-gradient(115deg, #0e2a2c 0%, #1d5d63 55%, #59c6c4 130%)", blobA: "#59c6c4", blobB: "#2bb0a0" },
   { base: "linear-gradient(115deg, #131534 0%, #2c3a8c 55%, #6088e8 130%)", blobA: "#6088e8", blobB: "#3b5db8" },
@@ -986,13 +1002,11 @@ var SplitDialogContent = React10.forwardRef(
 
 // src/components/layout/List.tsx
 import React11 from "react";
-import {
-  List as MuiList,
-  ListItem as MuiListItem,
-  ListItemText,
-  ListItemIcon,
-  ListItemSecondaryAction
-} from "@mui/material";
+import MuiList from "@mui/material/List";
+import MuiListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
 import { styled as styled3 } from "@mui/material/styles";
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var List = React11.forwardRef(function List2(props, ref) {
@@ -1051,15 +1065,13 @@ var Avatar = React12.forwardRef(function Avatar2({ size = "medium", ...props },
 
 // src/components/layout/Table.tsx
 import React13 from "react";
-import {
-  Table as MuiTable,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TableSortLabel
-} from "@mui/material";
+import MuiTable from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
 import { styled as styled5 } from "@mui/material/styles";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var StyledTableContainer = styled5(TableContainer)(({ theme }) => ({
@@ -1091,7 +1103,7 @@ var TableHeader = React13.forwardRef(
 );
 
 // src/components/layout/Grid.tsx
-import { Grid2 } from "@mui/material";
+import { default as default2 } from "@mui/material/Grid2";
 
 // src/components/layout/Breadcrumbs.tsx
 import React14 from "react";
@@ -1140,11 +1152,9 @@ var Breadcrumbs = React14.forwardRef(function Breadcrumbs2({ items, ...props },
 
 // src/components/layout/Accordion.tsx
 import React15 from "react";
-import {
-  Accordion as MuiAccordion,
-  AccordionSummary,
-  AccordionDetails
-} from "@mui/material";
+import MuiAccordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { styled as styled7 } from "@mui/material/styles";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -1219,19 +1229,17 @@ var Divider3 = React17.forwardRef(function Divider4(props, ref) {
 });
 
 // src/components/layout/Stack.tsx
-import { Stack as Stack2 } from "@mui/material";
+import { default as default3 } from "@mui/material/Stack";
 
 // src/components/layout/Box.tsx
-import { Box as Box13 } from "@mui/material";
+import { default as default4 } from "@mui/material/Box";
 
 // src/components/layout/Container.tsx
-import { Container as Container2 } from "@mui/material";
+import { default as default5 } from "@mui/material/Container";
 
 // src/components/layout/AppBar.tsx
-import {
-  AppBar as MuiAppBar,
-  Toolbar
-} from "@mui/material";
+import MuiAppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
 import { styled as styled10 } from "@mui/material/styles";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var StyledAppBar = styled10(MuiAppBar, {
@@ -1255,9 +1263,7 @@ var AppBar = ({ height = 64, children, ...props }) => {
 
 // src/components/layout/Collapse.tsx
 import React18 from "react";
-import {
-  Collapse as MuiCollapse
-} from "@mui/material";
+import MuiCollapse from "@mui/material/Collapse";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Collapse = React18.forwardRef(function Collapse2(props, ref) {
   return /* @__PURE__ */ jsx22(MuiCollapse, { ref, ...props });
@@ -1265,7 +1271,7 @@ var Collapse = React18.forwardRef(function Collapse2(props, ref) {
 
 // src/components/layout/EntityHeader/EntityHeader.tsx
 import React19 from "react";
-import Box14 from "@mui/material/Box";
+import Box13 from "@mui/material/Box";
 import Typography10 from "@mui/material/Typography";
 import IconButton5 from "@mui/material/IconButton";
 import Divider5 from "@mui/material/Divider";
@@ -1290,9 +1296,9 @@ var EntityHeader = React19.forwardRef(
       const { label, count } = primaryAction;
       return count !== void 0 ? `${label} (${count})` : label;
     };
-    return /* @__PURE__ */ jsxs14(Box14, { ref, children: [
+    return /* @__PURE__ */ jsxs14(Box13, { ref, children: [
       /* @__PURE__ */ jsxs14(
-        Box14,
+        Box13,
         {
           sx: {
             display: "flex",
@@ -1304,7 +1310,7 @@ var EntityHeader = React19.forwardRef(
           },
           children: [
             /* @__PURE__ */ jsxs14(
-              Box14,
+              Box13,
               {
                 sx: {
                   display: "flex",
@@ -1314,7 +1320,7 @@ var EntityHeader = React19.forwardRef(
                 },
                 children: [
                   /* @__PURE__ */ jsxs14(
-                    Box14,
+                    Box13,
                     {
                       sx: {
                         display: "flex",
@@ -1359,7 +1365,7 @@ var EntityHeader = React19.forwardRef(
               }
             ),
             /* @__PURE__ */ jsxs14(
-              Box14,
+              Box13,
               {
                 sx: {
                   display: "flex",
@@ -1426,1190 +1432,6 @@ var EntityHeader = React19.forwardRef(
   }
 );
 
-// src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
-import {
-  Paper as Paper3,
-  Box as Box15,
-  Typography as Typography11,
-  IconButton as IconButton6,
-  useTheme,
-  LinearProgress
-} from "@mui/material";
-import ExpandMoreIcon2 from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon2 from "@mui/icons-material/ChevronRight";
-import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
-import WavesIcon from "@mui/icons-material/Waves";
-import RocketLaunchOutlinedIcon from "@mui/icons-material/RocketLaunchOutlined";
-import InsertLinkIcon from "@mui/icons-material/InsertLink";
-import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
-import { styled as styled11 } from "@mui/material/styles";
-
-// src/hooks/useControlledExpand.ts
-import { useState as useState2 } from "react";
-function useControlledExpand(controlledExpanded, onToggle, defaultExpanded = false) {
-  const [internal, setInternal] = useState2(defaultExpanded);
-  const isControlled = controlledExpanded !== void 0 && onToggle != null;
-  const expanded = isControlled ? controlledExpanded : internal;
-  const toggle = isControlled ? () => onToggle() : () => setInternal((prev) => !prev);
-  return { expanded, toggle };
-}
-
-// src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
-var ENTITY_LABELS = {
-  workspace: "Workspace",
-  stream: "Stream",
-  deployment: "Deployment",
-  engagement: "Engagement",
-  agent: "Agent"
-};
-var ENTITY_ICON_SIZE = 16;
-var ENTITY_ICONS = {
-  workspace: /* @__PURE__ */ jsx24(WorkOutlineIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  stream: /* @__PURE__ */ jsx24(WavesIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  deployment: /* @__PURE__ */ jsx24(RocketLaunchOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  engagement: /* @__PURE__ */ jsx24(InsertLinkIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
-  agent: /* @__PURE__ */ jsx24(SmartToyOutlinedIcon, { sx: { fontSize: ENTITY_ICON_SIZE } })
-};
-var STATUS_DOT_COLORS = {
-  normal: deploymentStatusColors.normal,
-  warning: deploymentStatusColors.warning,
-  error: deploymentStatusColors.error,
-  disabled: deploymentStatusColors.disabledDim
-};
-var CHEVRON_SIZE = 16;
-var ENTITY_CHIP_STYLES = {
-  borderRadius: "12px",
-  borderWidth: "1.5px",
-  padding: { left: 0.75, right: 1, vertical: 0.25 },
-  gap: 0.5
-};
-var ENTITY_CHIP_TYPOGRAPHY = {
-  fontSize: "12px",
-  fontWeight: 500,
-  lineHeight: 1.33,
-  letterSpacing: "0.07px"
-};
-var StatusDot = styled11(Box15, {
-  shouldForwardProp: (p) => p !== "status"
-})(({ status }) => ({
-  width: 8,
-  height: 8,
-  borderRadius: "50%",
-  backgroundColor: status ? STATUS_DOT_COLORS[status] ?? "transparent" : "transparent",
-  flexShrink: 0
-}));
-var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs15(
-  Box15,
-  {
-    sx: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: ENTITY_CHIP_STYLES.gap,
-      pl: ENTITY_CHIP_STYLES.padding.left,
-      pr: ENTITY_CHIP_STYLES.padding.right,
-      py: ENTITY_CHIP_STYLES.padding.vertical,
-      borderRadius: ENTITY_CHIP_STYLES.borderRadius,
-      backgroundColor: deploymentSurfaceTokens.surfaceHigh,
-      border: `${ENTITY_CHIP_STYLES.borderWidth} solid ${color}`,
-      flexShrink: 0
-    },
-    children: [
-      /* @__PURE__ */ jsx24(Box15, { sx: { color, display: "flex", alignItems: "center" }, children: ENTITY_ICONS[entityType] }),
-      /* @__PURE__ */ jsx24(
-        Typography11,
-        {
-          variant: "body2",
-          fontWeight: ENTITY_CHIP_TYPOGRAPHY.fontWeight,
-          sx: {
-            color: "common.black",
-            lineHeight: ENTITY_CHIP_TYPOGRAPHY.lineHeight,
-            fontSize: ENTITY_CHIP_TYPOGRAPHY.fontSize,
-            letterSpacing: ENTITY_CHIP_TYPOGRAPHY.letterSpacing
-          },
-          children: ENTITY_LABELS[entityType]
-        }
-      )
-    ]
-  }
-);
-var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs15(Box15, { sx: { pl: indented ? "40px" : 0, pr: "20px", py: 1 }, children: [
-  /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
-    /* @__PURE__ */ jsx24(Typography11, { variant: "body2", sx: { color: deploymentSurfaceTokens.textPrimary }, children: "Capacity" }),
-    /* @__PURE__ */ jsxs15(Typography11, { variant: "body2", sx: { color: deploymentSurfaceTokens.accentBlue }, children: [
-      value,
-      "%"
-    ] })
-  ] }),
-  /* @__PURE__ */ jsx24(
-    LinearProgress,
-    {
-      variant: "determinate",
-      value,
-      sx: {
-        height: 4,
-        borderRadius: "20px",
-        backgroundColor: deploymentSurfaceTokens.strokeOutside,
-        "& .MuiLinearProgress-bar": {
-          borderRadius: "20px",
-          backgroundColor: deploymentSurfaceTokens.accentBlue
-        }
-      }
-    }
-  )
-] });
-var getActionButtonStyles = (action) => {
-  const baseStyles = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 0.5,
-    cursor: action.onClick ? "pointer" : "default",
-    background: "none",
-    font: "inherit",
-    color: deploymentSurfaceTokens.textPrimary,
-    whiteSpace: "nowrap",
-    "&:hover": action.onClick ? { opacity: 0.7 } : void 0
-  };
-  const variantStyles = action.outlined ? {
-    border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-    borderRadius: "8px",
-    p: 1,
-    bgcolor: "white"
-  } : {
-    border: "none",
-    p: 0
-  };
-  return { ...baseStyles, ...variantStyles };
-};
-var CardAction = ({ action }) => /* @__PURE__ */ jsxs15(
-  Box15,
-  {
-    component: action.onClick ? "button" : "span",
-    onClick: action.onClick,
-    sx: getActionButtonStyles(action),
-    children: [
-      action.icon && /* @__PURE__ */ jsx24(Box15, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
-      action.label && /* @__PURE__ */ jsx24(Typography11, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
-    ]
-  }
-);
-var CardActionList = ({ actions }) => /* @__PURE__ */ jsx24(Fragment3, { children: actions.map((action) => /* @__PURE__ */ jsx24(CardAction, { action }, action.id)) });
-var DeploymentDashboardCard = ({
-  entityType,
-  title,
-  id: idDisplay,
-  createdAt,
-  updatedAt,
-  capacity,
-  actions = [],
-  statusIndicator = null,
-  expandable = false,
-  expanded: controlledExpanded,
-  onExpandToggle,
-  onCopyId,
-  className,
-  children
-}) => {
-  const theme = useTheme();
-  const entityColor = theme.palette.deployment?.entity?.[entityType] ?? deploymentEntityColors[entityType];
-  const isControlled = expandable && onExpandToggle != null;
-  const { expanded, toggle } = useControlledExpand(
-    isControlled ? controlledExpanded : void 0,
-    isControlled ? onExpandToggle : void 0
-  );
-  const isWorkspace = entityType === "workspace";
-  const isDeployment = entityType === "deployment";
-  const getClampedCapacity = (capacity2) => {
-    if (!isDeployment || capacity2 == null) {
-      return void 0;
-    }
-    return Math.min(100, Math.max(0, capacity2));
-  };
-  const capacityClamped = getClampedCapacity(capacity);
-  return /* @__PURE__ */ jsxs15(
-    Paper3,
-    {
-      className,
-      elevation: 0,
-      sx: {
-        border: `1px solid ${isWorkspace ? deploymentSurfaceTokens.accentBlue : deploymentSurfaceTokens.borderDefault}`,
-        borderRadius: isWorkspace ? "4px" : "12px",
-        boxShadow: isWorkspace ? deploymentSurfaceTokens.workspaceShadow : "none",
-        px: 1,
-        py: isDeployment ? 2 : 1,
-        pl: 1,
-        display: "flex",
-        flexDirection: "column",
-        gap: 0
-      },
-      children: [
-        /* @__PURE__ */ jsxs15(
-          Box15,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: isDeployment ? "flex-start" : "center",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
-                  expandable ? /* @__PURE__ */ jsx24(
-                    IconButton6,
-                    {
-                      size: "small",
-                      onClick: toggle,
-                      "aria-label": expanded ? "Collapse" : "Expand",
-                      sx: { p: "5px" },
-                      children: expanded ? /* @__PURE__ */ jsx24(ExpandMoreIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ jsx24(ChevronRightIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } })
-                    }
-                  ) : /* @__PURE__ */ jsx24(Box15, { sx: { width: 26, flexShrink: 0 } }),
-                  /* @__PURE__ */ jsx24(EntityChip, { entityType, color: entityColor }),
-                  /* @__PURE__ */ jsx24(
-                    Typography11,
-                    {
-                      variant: "subtitle1",
-                      fontWeight: 500,
-                      noWrap: true,
-                      sx: { color: deploymentSurfaceTokens.textPrimary, fontSize: "16px", letterSpacing: "0.08px" },
-                      children: title
-                    }
-                  ),
-                  idDisplay != null && /* @__PURE__ */ jsx24(IDBlock, { id: idDisplay, label: "ID", entityType, onCopy: onCopyId })
-                ] }),
-                (createdAt != null || updatedAt != null) && /* @__PURE__ */ jsxs15(
-                  Box15,
-                  {
-                    sx: {
-                      display: "flex",
-                      gap: 2,
-                      px: "34px",
-                      color: deploymentSurfaceTokens.textSecondary
-                    },
-                    children: [
-                      createdAt != null && /* @__PURE__ */ jsxs15(Typography11, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
-                        "Created: ",
-                        createdAt
-                      ] }),
-                      updatedAt != null && /* @__PURE__ */ jsxs15(Typography11, { variant: "body2", sx: { color: "inherit", fontSize: "14px" }, children: [
-                        "Last Updated: ",
-                        updatedAt
-                      ] })
-                    ]
-                  }
-                ),
-                capacityClamped !== void 0 && /* @__PURE__ */ jsx24(CapacityBar, { value: capacityClamped, indented: expandable })
-              ] }),
-              /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
-                statusIndicator != null && /* @__PURE__ */ jsx24(StatusDot, { status: statusIndicator, "aria-hidden": true }),
-                /* @__PURE__ */ jsx24(CardActionList, { actions })
-              ] })
-            ]
-          }
-        ),
-        children && /* @__PURE__ */ jsx24(Box15, { sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children })
-      ]
-    }
-  );
-};
-
-// src/components/layout/DeploymentEntityContextMenu/DeploymentEntityContextMenu.tsx
-import { Menu, MenuItem, Switch, Divider as Divider6, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2 } from "@mui/material";
-import { styled as styled12 } from "@mui/material/styles";
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-var StyledMenu = styled12(Menu)({
-  "& .MuiPaper-root": {
-    borderRadius: 4,
-    boxShadow: deploymentSurfaceTokens.workspaceShadow,
-    minWidth: 220,
-    border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-    padding: 8
-  },
-  "& .MuiList-root": {
-    padding: 0
-  }
-});
-var StyledMenuItem = styled12(MenuItem)({
-  gap: 8,
-  padding: "8px 0",
-  borderRadius: 4,
-  minHeight: "auto",
-  "&:hover": {
-    backgroundColor: deploymentSurfaceTokens.hoverLight
-  },
-  "& .MuiListItemIcon-root": {
-    minWidth: "auto",
-    color: deploymentSurfaceTokens.textPrimary,
-    "& .MuiSvgIcon-root": {
-      fontSize: 24
-    }
-  },
-  "& .MuiListItemText-root .MuiTypography-root": {
-    fontSize: 16,
-    fontWeight: 500,
-    lineHeight: 1.5,
-    letterSpacing: "0.08px",
-    color: deploymentSurfaceTokens.textPrimary
-  }
-});
-var HighlightedMenuItem = styled12(StyledMenuItem)({
-  backgroundColor: deploymentSurfaceTokens.highlightBg,
-  border: `1px solid ${deploymentSurfaceTokens.highlightBorder}`,
-  padding: 8,
-  "&:hover": {
-    backgroundColor: deploymentSurfaceTokens.highlightBgHover
-  }
-});
-var ToggleMenuItem = styled12(MenuItem)({
-  gap: 8,
-  padding: "8px 0",
-  cursor: "default",
-  minHeight: "auto",
-  "&:hover": {
-    backgroundColor: "transparent"
-  },
-  "& .MuiListItemText-root .MuiTypography-root": {
-    fontSize: 16,
-    fontWeight: 500,
-    lineHeight: 1.5,
-    letterSpacing: "0.08px",
-    color: deploymentSurfaceTokens.textPrimary
-  }
-});
-var EnableSwitch = styled12(Switch)(({ theme }) => ({
-  width: 32,
-  height: 20,
-  padding: 0,
-  "& .MuiSwitch-switchBase": {
-    padding: 2,
-    "&.Mui-checked": {
-      transform: "translateX(12px)",
-      color: theme.palette.common.white,
-      "& + .MuiSwitch-track": {
-        backgroundColor: deploymentSurfaceTokens.switchGreen,
-        opacity: 1
-      }
-    }
-  },
-  "& .MuiSwitch-thumb": {
-    width: 16,
-    height: 16
-  },
-  "& .MuiSwitch-track": {
-    borderRadius: 100,
-    backgroundColor: deploymentSurfaceTokens.switchTrackOff,
-    opacity: 1
-  }
-}));
-var StyledDivider2 = styled12(Divider6)({
-  margin: "0 !important",
-  borderColor: deploymentSurfaceTokens.strokeOutside
-});
-var DeploymentEntityContextMenu = ({
-  open,
-  anchorEl,
-  onClose,
-  items,
-  enableToggle = false,
-  enableChecked = false,
-  onEnableChange
-}) => {
-  return /* @__PURE__ */ jsxs16(
-    StyledMenu,
-    {
-      anchorEl,
-      open,
-      onClose,
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      slotProps: { paper: { "aria-label": "Entity context menu" } },
-      children: [
-        items.map((item) => {
-          if (item.type === "divider") {
-            return /* @__PURE__ */ jsx25(StyledDivider2, {}, item.id);
-          }
-          if (item.type === "toggle") {
-            return /* @__PURE__ */ jsxs16(ToggleMenuItem, { disableRipple: true, children: [
-              onEnableChange && /* @__PURE__ */ jsx25(
-                EnableSwitch,
-                {
-                  size: "small",
-                  checked: enableChecked,
-                  onChange: (_, checked) => onEnableChange(checked),
-                  inputProps: { "aria-label": item.label }
-                }
-              ),
-              /* @__PURE__ */ jsx25(ListItemText2, { primary: item.label })
-            ] }, item.id);
-          }
-          const Row = item.highlighted ? HighlightedMenuItem : StyledMenuItem;
-          return /* @__PURE__ */ jsxs16(
-            Row,
-            {
-              onClick: () => {
-                item.onClick?.();
-                onClose();
-              },
-              children: [
-                item.icon && /* @__PURE__ */ jsx25(ListItemIcon2, { children: item.icon }),
-                /* @__PURE__ */ jsx25(ListItemText2, { primary: item.label })
-              ]
-            },
-            item.id
-          );
-        }),
-        enableToggle && /* @__PURE__ */ jsxs16(Fragment4, { children: [
-          /* @__PURE__ */ jsx25(StyledDivider2, {}),
-          /* @__PURE__ */ jsxs16(ToggleMenuItem, { disableRipple: true, children: [
-            onEnableChange && /* @__PURE__ */ jsx25(
-              EnableSwitch,
-              {
-                size: "small",
-                checked: enableChecked,
-                onChange: (_, checked) => onEnableChange(checked),
-                inputProps: { "aria-label": "Enable" }
-              }
-            ),
-            /* @__PURE__ */ jsx25(ListItemText2, { primary: "Enable" })
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/components/layout/DeploymentEntityContextMenu/contextMenuItems.tsx
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import EditIcon from "@mui/icons-material/Edit";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import SmartToyOutlinedIcon2 from "@mui/icons-material/SmartToyOutlined";
-import DescriptionIcon from "@mui/icons-material/Description";
-import SettingsIcon from "@mui/icons-material/Settings";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var contextMenuItems = {
-  /** Add Engagement action (Add Circle icon) */
-  addEngagement: (onClick) => ({
-    id: "add-engagement",
-    label: "Add Engagement",
-    icon: /* @__PURE__ */ jsx26(AddCircleOutlineIcon, {}),
-    onClick
-  }),
-  /** Add Agent action (Add Circle icon) */
-  addAgent: (onClick) => ({
-    id: "add-agent",
-    label: "Add Agent",
-    icon: /* @__PURE__ */ jsx26(AddCircleOutlineIcon, {}),
-    onClick
-  }),
-  /** Add Stream action (Add Circle icon) */
-  addStream: (onClick) => ({
-    id: "add-stream",
-    label: "Add Stream",
-    icon: /* @__PURE__ */ jsx26(AddCircleOutlineIcon, {}),
-    onClick
-  }),
-  /** Edit action (Pen / Edit icon) */
-  edit: (onClick) => ({
-    id: "edit",
-    label: "Edit",
-    icon: /* @__PURE__ */ jsx26(EditIcon, {}),
-    onClick
-  }),
-  /** Copy ID action (Copy icon) */
-  copyId: (onClick) => ({
-    id: "copy-id",
-    label: "Copy ID",
-    icon: /* @__PURE__ */ jsx26(ContentCopyIcon, {}),
-    onClick
-  }),
-  /** Agent Flow Visualization — highlighted action (SmartToy icon) */
-  agentFlowVisualization: (onClick) => ({
-    id: "agent-flow",
-    label: "Agent Flow Visualization",
-    icon: /* @__PURE__ */ jsx26(SmartToyOutlinedIcon2, {}),
-    onClick,
-    highlighted: true
-  }),
-  /** View Logs action (Document / Description icon) */
-  viewLogs: (onClick) => ({
-    id: "view-logs",
-    label: "View Logs",
-    icon: /* @__PURE__ */ jsx26(DescriptionIcon, {}),
-    onClick
-  }),
-  /** Horizontal divider between sections */
-  divider: () => ({
-    id: "divider",
-    label: "",
-    type: "divider"
-  }),
-  /** Enable toggle row (switch on left + label) */
-  enable: () => ({
-    id: "enable",
-    label: "Enable",
-    type: "toggle"
-  }),
-  /** Settings action (Settings / Gear icon) */
-  settings: (onClick) => ({
-    id: "settings",
-    label: "Settings",
-    icon: /* @__PURE__ */ jsx26(SettingsIcon, {}),
-    onClick
-  })
-};
-
-// src/components/layout/DeploymentDashboardTree/DeploymentDashboardTree.tsx
-import { Box as Box16 } from "@mui/material";
-import { styled as styled13, alpha } from "@mui/material/styles";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var TREE_SP = {
-  /** Vertical gap between sibling rows (Figma S / sp-8) */
-  rowGap: 8,
-  /** Gap between rail and children column (Figma sp-12) */
-  railGap: 12,
-  /** Rail width (Figma) */
-  railWidth: 4,
-  /** Total horizontal indent per level = railWidth + railGap (Figma M = 16) */
-  indentPerLevel: 4 + 12
-};
-var RAIL_OPACITY = {
-  workspace: 0.5,
-  stream: 0.5,
-  deployment: 0.4,
-  engagement: 0.4,
-  agent: 0.4
-};
-var Rail = styled13(Box16, {
-  shouldForwardProp: (p) => p !== "railColor"
-})(({ railColor }) => ({
-  width: TREE_SP.railWidth,
-  borderRadius: TREE_SP.railWidth / 2,
-  backgroundColor: railColor,
-  flexShrink: 0,
-  alignSelf: "stretch"
-}));
-var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
-  const hasChildren = Boolean(node.children && node.children.length > 0);
-  const { expanded, toggle } = useControlledExpand(
-    onExpandToggle != null ? node.expanded : void 0,
-    onExpandToggle ? () => onExpandToggle(node.id) : void 0,
-    node.expanded ?? false
-  );
-  const entityColor = deploymentEntityColors[node.entityType] ?? deploymentEntityColors.workspace;
-  const railOpacity = RAIL_OPACITY[node.entityType] ?? 0.5;
-  const railColor = alpha(entityColor, railOpacity);
-  const renderedChildren = hasChildren && expanded ? /* @__PURE__ */ jsxs17(Box16, { sx: { display: "flex", gap: `${TREE_SP.railGap}px` }, children: [
-    /* @__PURE__ */ jsx27(Rail, { railColor, "aria-hidden": true, "data-rail": true }),
-    /* @__PURE__ */ jsx27(
-      Box16,
-      {
-        role: "group",
-        sx: {
-          flex: 1,
-          minWidth: 0,
-          display: "flex",
-          flexDirection: "column",
-          gap: `${TREE_SP.rowGap}px`
-        },
-        children: node.children.map((child) => /* @__PURE__ */ jsx27(
-          TreeRow,
-          {
-            node: child,
-            depth: depth + 1,
-            onExpandToggle,
-            onCopyId,
-            renderCard
-          },
-          child.id
-        ))
-      }
-    )
-  ] }) : null;
-  const cardContent = renderCard?.(node) ?? /* @__PURE__ */ jsx27(
-    DeploymentDashboardCard,
-    {
-      entityType: node.entityType,
-      title: node.title,
-      id: node.idDisplay,
-      createdAt: node.createdAt,
-      updatedAt: node.updatedAt,
-      capacity: node.capacity,
-      actions: node.actions,
-      statusIndicator: node.statusIndicator,
-      expandable: hasChildren,
-      expanded,
-      onExpandToggle: hasChildren ? toggle : void 0,
-      onCopyId: onCopyId && node.idDisplay ? () => onCopyId(node.id) : void 0,
-      children: renderedChildren
-    }
-  );
-  return /* @__PURE__ */ jsx27(Box16, { role: "treeitem", children: cardContent });
-};
-var DeploymentDashboardTree = ({
-  nodes,
-  onExpandToggle,
-  onCopyId,
-  renderCard
-}) => {
-  return /* @__PURE__ */ jsx27(
-    Box16,
-    {
-      role: "tree",
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: `${TREE_SP.rowGap}px`,
-        p: `${TREE_SP.rowGap}px`
-      },
-      children: nodes.map((node) => /* @__PURE__ */ jsx27(
-        TreeRow,
-        {
-          node,
-          depth: 0,
-          onExpandToggle,
-          onCopyId,
-          renderCard
-        },
-        node.id
-      ))
-    }
-  );
-};
-
-// src/components/layout/DeploymentDashboardPanel/DeploymentDashboardPanel.tsx
-import { Box as Box17 } from "@mui/material";
-import { styled as styled14 } from "@mui/material/styles";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var PANEL_RADIUS = 12;
-var PANEL_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.08)";
-var StyledPanel = styled14(Box17)({
-  backgroundColor: deploymentSurfaceTokens.surfaceHigh,
-  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-  borderRadius: PANEL_RADIUS,
-  boxShadow: PANEL_SHADOW,
-  overflow: "hidden"
-});
-var DeploymentDashboardPanel = ({
-  children,
-  className,
-  padding = 2
-}) => {
-  return /* @__PURE__ */ jsx28(StyledPanel, { className, sx: { p: padding }, children });
-};
-
-// src/components/layout/WorkflowTopBar/WorkflowTopBar.tsx
-import {
-  Box as Box18,
-  Divider as Divider7,
-  IconButton as IconButton7,
-  InputBase,
-  Typography as Typography12,
-  alpha as alpha2
-} from "@mui/material";
-import CloseIcon4 from "@mui/icons-material/Close";
-import CancelIcon from "@mui/icons-material/Cancel";
-import { useTheme as useTheme2 } from "@mui/material/styles";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
-var WorkflowTopBar = ({
-  title = "Agent visualization flow chart",
-  executionId,
-  executionIdLabel = "Job ID",
-  onExecutionIdChange,
-  onClearExecutionId,
-  submitLabel = "Submit",
-  onSubmit,
-  inspectorLabel = "Inspector",
-  onInspectorToggle,
-  onClose,
-  showInspectorToggle = true,
-  showCloseButton = true,
-  sx,
-  ...boxProps
-}) => {
-  const chrome = useTheme2().palette.workflow.chrome;
-  return /* @__PURE__ */ jsxs18(
-    Box18,
-    {
-      sx: [
-        {
-          backgroundColor: "common.white",
-          display: "flex",
-          flexDirection: "column",
-          width: "100%"
-        },
-        ...Array.isArray(sx) ? sx : [sx]
-      ],
-      ...boxProps,
-      children: [
-        /* @__PURE__ */ jsxs18(
-          Box18,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 2,
-              px: 2,
-              py: 2,
-              minHeight: 72
-            },
-            children: [
-              /* @__PURE__ */ jsx29(
-                Typography12,
-                {
-                  variant: "subtitle1",
-                  sx: {
-                    color: deploymentSurfaceTokens.textPrimary,
-                    fontWeight: 500,
-                    minWidth: 220
-                  },
-                  children: title
-                }
-              ),
-              /* @__PURE__ */ jsxs18(
-                Box18,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 2,
-                    justifyContent: "flex-end",
-                    flex: 1,
-                    minWidth: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs18(
-                      Box18,
-                      {
-                        sx: {
-                          display: "flex",
-                          alignItems: "center",
-                          backgroundColor: chrome.inputBg,
-                          borderRadius: "4px 4px 0 0",
-                          borderBottom: `2px solid ${chrome.inputBorder}`,
-                          px: 2,
-                          minWidth: 320,
-                          maxWidth: 440,
-                          flex: "1 1 auto",
-                          minHeight: 56
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs18(Box18, { sx: { flex: 1, minWidth: 0 }, children: [
-                            /* @__PURE__ */ jsx29(
-                              Typography12,
-                              {
-                                variant: "caption",
-                                sx: {
-                                  color: chrome.labelText,
-                                  fontSize: 12,
-                                  display: "block"
-                                },
-                                children: executionIdLabel
-                              }
-                            ),
-                            /* @__PURE__ */ jsx29(
-                              InputBase,
-                              {
-                                value: executionId,
-                                onChange: (event) => onExecutionIdChange?.(event.target.value),
-                                inputProps: { "aria-label": executionIdLabel },
-                                sx: {
-                                  width: "100%",
-                                  mt: 0.25,
-                                  "& .MuiInputBase-input": {
-                                    p: 0,
-                                    color: deploymentSurfaceTokens.textPrimary,
-                                    fontSize: 16,
-                                    lineHeight: 1.5
-                                  }
-                                }
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx29(
-                            IconButton7,
-                            {
-                              size: "small",
-                              "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
-                              onClick: onClearExecutionId,
-                              sx: { color: chrome.iconColor, ml: 1 },
-                              children: /* @__PURE__ */ jsx29(CancelIcon, { fontSize: "small" })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx29(
-                      Button,
-                      {
-                        variant: "primary",
-                        onClick: onSubmit,
-                        sx: {
-                          backgroundColor: chrome.buttonPrimary,
-                          "&:hover": {
-                            backgroundColor: chrome.buttonHover
-                          },
-                          "&:active": {
-                            backgroundColor: chrome.buttonActive
-                          }
-                        },
-                        children: submitLabel
-                      }
-                    ),
-                    showInspectorToggle && /* @__PURE__ */ jsx29(Button, { variant: "secondary", onClick: onInspectorToggle, children: inspectorLabel }),
-                    showCloseButton && /* @__PURE__ */ jsx29(
-                      IconButton7,
-                      {
-                        "aria-label": "Close workflow chrome",
-                        onClick: onClose,
-                        sx: {
-                          width: 30,
-                          height: 30,
-                          backgroundColor: alpha2(chrome.closeBtnBg, 0.28),
-                          color: chrome.iconColor
-                        },
-                        children: /* @__PURE__ */ jsx29(CloseIcon4, { fontSize: "small" })
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx29(Divider7, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } })
-      ]
-    }
-  );
-};
-
-// src/components/layout/WorkflowSideInspector/WorkflowSideInspector.tsx
-import {
-  Box as Box19,
-  Divider as Divider8,
-  IconButton as IconButton8,
-  Paper as Paper4,
-  Typography as Typography13,
-  alpha as alpha3,
-  useTheme as useTheme3
-} from "@mui/material";
-import CloseIcon5 from "@mui/icons-material/Close";
-import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
-var INSPECTOR_WIDTH = 320;
-var InfoBlock = ({ label, value, mutedColor }) => /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-  /* @__PURE__ */ jsx30(Typography13, { variant: "body2", sx: { color: mutedColor }, children: label }),
-  /* @__PURE__ */ jsx30(
-    Typography13,
-    {
-      variant: "body2",
-      sx: { color: deploymentSurfaceTokens.textPrimary, whiteSpace: "pre-wrap" },
-      children: value
-    }
-  )
-] });
-var WorkflowSideInspector = ({
-  open = true,
-  title = "Inspector",
-  nodeTitle = "Player location cubby",
-  nodeDescription = "Retrieving everything we know about this player so far.",
-  nodeType = "cubbies",
-  inputValue = "Get player topic tree",
-  outputValue = "Topic tree with emotional trends and behavior patterns",
-  cubbyId = "ID:S8787",
-  timestamp = "2026-02-11 14:32:10",
-  duration = "120ms",
-  showInput = true,
-  showOutput = true,
-  showTimestamp = true,
-  showDuration = true,
-  actionLabel,
-  onClose,
-  onCopyCubbyId,
-  onAction,
-  sx,
-  ...paperProps
-}) => {
-  const theme = useTheme3();
-  const chrome = theme.palette.workflow.chrome;
-  if (!open) {
-    return null;
-  }
-  const accent = theme.palette.workflow.node[nodeType].accent;
-  return /* @__PURE__ */ jsxs19(
-    Paper4,
-    {
-      elevation: 0,
-      sx: {
-        width: INSPECTOR_WIDTH,
-        minWidth: INSPECTOR_WIDTH,
-        maxWidth: INSPECTOR_WIDTH,
-        p: 3,
-        backgroundColor: theme.palette.common.white,
-        borderRadius: 0,
-        boxShadow: "0px 5px 8px rgba(0, 3, 11, 0.12), 0px 0px 1px rgba(0, 3, 11, 0.24)",
-        display: "flex",
-        flexDirection: "column",
-        gap: 3,
-        ...sx
-      },
-      ...paperProps,
-      children: [
-        /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
-          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx30(Typography13, { variant: "subtitle1", sx: { color: deploymentSurfaceTokens.textPrimary }, children: title }),
-            /* @__PURE__ */ jsx30(
-              IconButton8,
-              {
-                "aria-label": "Close inspector",
-                onClick: onClose,
-                sx: {
-                  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-                  borderRadius: 2
-                },
-                children: /* @__PURE__ */ jsx30(CloseIcon5, { fontSize: "small" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } })
-        ] }),
-        /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 3, flex: 1 }, children: [
-          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-            /* @__PURE__ */ jsx30(
-              Typography13,
-              {
-                variant: "subtitle1",
-                sx: { color: deploymentSurfaceTokens.textPrimary, fontWeight: 500 },
-                children: nodeTitle
-              }
-            ),
-            /* @__PURE__ */ jsx30(Typography13, { variant: "body2", sx: { color: chrome.mutedText }, children: nodeDescription }),
-            /* @__PURE__ */ jsxs19(
-              Box19,
-              {
-                sx: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  alignSelf: "flex-start",
-                  gap: 1,
-                  px: 1.25,
-                  py: 0.5,
-                  borderRadius: "999px",
-                  border: `1px solid ${accent}`,
-                  backgroundColor: alpha3(accent, 0.12)
-                },
-                children: [
-                  /* @__PURE__ */ jsx30(
-                    Box19,
-                    {
-                      sx: {
-                        width: 10,
-                        height: 10,
-                        borderRadius: "50%",
-                        backgroundColor: accent
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx30(Typography13, { variant: "caption", sx: { color: accent, fontWeight: 500 }, children: WORKFLOW_NODE_LABELS[nodeType] })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } }),
-          (showInput || showOutput) && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-            /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              showInput && /* @__PURE__ */ jsx30(InfoBlock, { label: "Input", value: inputValue, mutedColor: chrome.mutedText }),
-              showOutput && /* @__PURE__ */ jsx30(InfoBlock, { label: "Output", value: outputValue, mutedColor: chrome.mutedText })
-            ] }),
-            /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } })
-          ] }),
-          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-            /* @__PURE__ */ jsx30(Typography13, { variant: "body2", sx: { color: chrome.mutedText }, children: "Cubby ID" }),
-            /* @__PURE__ */ jsx30(
-              Button,
-              {
-                variant: "secondary",
-                size: "small",
-                startIcon: /* @__PURE__ */ jsx30(ContentCopyOutlinedIcon, { fontSize: "small" }),
-                onClick: onCopyCubbyId,
-                sx: { alignSelf: "flex-start" },
-                children: cubbyId
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } }),
-          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-            /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              showTimestamp && /* @__PURE__ */ jsx30(InfoBlock, { label: "Timestamp", value: timestamp, mutedColor: chrome.mutedText }),
-              showDuration && /* @__PURE__ */ jsx30(InfoBlock, { label: "Duration", value: duration, mutedColor: chrome.mutedText })
-            ] }),
-            /* @__PURE__ */ jsx30(Divider8, { sx: { borderColor: chrome.divider } })
-          ] })
-        ] }),
-        actionLabel && /* @__PURE__ */ jsx30(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
-      ]
-    }
-  );
-};
-
-// src/components/layout/WorkflowTimeBar/WorkflowTimeBar.tsx
-import {
-  Box as Box20,
-  Divider as Divider9,
-  IconButton as IconButton9,
-  LinearProgress as LinearProgress2,
-  Typography as Typography14
-} from "@mui/material";
-import StopIcon from "@mui/icons-material/Stop";
-import ChevronLeftIcon2 from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon3 from "@mui/icons-material/ChevronRight";
-import ReplayIcon from "@mui/icons-material/Replay";
-import { useTheme as useTheme4 } from "@mui/material/styles";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
-var SpeedButton = ({ value, selected, onClick }) => /* @__PURE__ */ jsx31(
-  Button,
-  {
-    variant: selected ? "primary" : "secondary",
-    size: "small",
-    onClick,
-    sx: {
-      minWidth: 48,
-      px: 1.5,
-      py: 0.25,
-      borderRadius: 1,
-      fontSize: 14,
-      lineHeight: 1.4
-    },
-    children: `${value}x`
-  }
-);
-var WorkflowTimeBar = ({
-  elapsedTime = "01m : 12s",
-  progress = 26,
-  currentStep = 1,
-  totalSteps = 16,
-  speedOptions = [0.5, 1, 2, 4],
-  selectedSpeed = 0.5,
-  onStop,
-  onPreviousStep,
-  onNextStep,
-  onSpeedChange,
-  onReset,
-  sx,
-  ...boxProps
-}) => {
-  const chrome = useTheme4().palette.workflow.chrome;
-  const boundedProgress = Math.max(0, Math.min(100, progress));
-  const atFirstStep = currentStep <= 1;
-  const atLastStep = currentStep >= totalSteps;
-  return /* @__PURE__ */ jsxs20(
-    Box20,
-    {
-      sx: [
-        {
-          width: "100%",
-          backgroundColor: "common.white",
-          px: 2,
-          pb: 2,
-          display: "flex",
-          flexDirection: "column",
-          gap: 2
-        },
-        ...Array.isArray(sx) ? sx : [sx]
-      ],
-      ...boxProps,
-      children: [
-        /* @__PURE__ */ jsx31(Divider9, { sx: { borderColor: deploymentSurfaceTokens.strokeOutside } }),
-        /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-          /* @__PURE__ */ jsx31(
-            IconButton9,
-            {
-              onClick: onStop,
-              "aria-label": "Stop playback",
-              sx: {
-                width: 40,
-                height: 40,
-                border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-                borderRadius: 1,
-                color: deploymentSurfaceTokens.textPrimary,
-                backgroundColor: deploymentSurfaceTokens.surfaceHigh
-              },
-              children: /* @__PURE__ */ jsx31(StopIcon, { sx: { fontSize: 16 } })
-            }
-          ),
-          /* @__PURE__ */ jsxs20(Box20, { sx: { flex: 1, minWidth: 220, px: 1 }, children: [
-            /* @__PURE__ */ jsx31(
-              Typography14,
-              {
-                variant: "body2",
-                sx: { color: deploymentSurfaceTokens.textPrimary, mb: 0.5 },
-                children: elapsedTime
-              }
-            ),
-            /* @__PURE__ */ jsx31(
-              LinearProgress2,
-              {
-                variant: "determinate",
-                value: boundedProgress,
-                sx: {
-                  height: 3,
-                  borderRadius: 999,
-                  backgroundColor: chrome.progressBg,
-                  "& .MuiLinearProgress-bar": {
-                    backgroundColor: deploymentSurfaceTokens.accentBlue
-                  }
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 3 }, children: [
-            /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx31(Typography14, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Steps" }),
-              /* @__PURE__ */ jsx31(
-                IconButton9,
-                {
-                  size: "small",
-                  "aria-label": "Previous step",
-                  onClick: onPreviousStep,
-                  disabled: atFirstStep,
-                  sx: { backgroundColor: chrome.stepBtnBg },
-                  children: /* @__PURE__ */ jsx31(ChevronLeftIcon2, { fontSize: "small" })
-                }
-              ),
-              /* @__PURE__ */ jsx31(Typography14, { variant: "subtitle1", sx: { minWidth: 52, textAlign: "center" }, children: `${currentStep} / ${totalSteps}` }),
-              /* @__PURE__ */ jsx31(
-                IconButton9,
-                {
-                  size: "small",
-                  "aria-label": "Next step",
-                  onClick: onNextStep,
-                  disabled: atLastStep,
-                  sx: { backgroundColor: chrome.stepBtnBgHover },
-                  children: /* @__PURE__ */ jsx31(ChevronRightIcon3, { fontSize: "small" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx31(Typography14, { variant: "subtitle1", sx: { fontWeight: 500 }, children: "Speed" }),
-              speedOptions.map((option) => /* @__PURE__ */ jsx31(
-                SpeedButton,
-                {
-                  value: option,
-                  selected: option === selectedSpeed,
-                  onClick: () => onSpeedChange?.(option)
-                },
-                option
-              )),
-              /* @__PURE__ */ jsx31(IconButton9, { "aria-label": "Reset playback", onClick: onReset, size: "small", children: /* @__PURE__ */ jsx31(ReplayIcon, { fontSize: "small" }) })
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-
 export {
   Logo,
   Dialog,
@@ -2634,25 +1456,17 @@ export {
   Avatar,
   Table,
   TableHeader,
-  Grid2,
+  default2 as default,
   Breadcrumbs,
   Accordion,
   Paper,
   Divider3 as Divider,
-  Stack2 as Stack,
-  Box13 as Box,
-  Container2 as Container,
+  default3 as default2,
+  default4 as default3,
+  default5 as default4,
   Toolbar,
   AppBar,
   Collapse,
-  EntityHeader,
-  DeploymentDashboardCard,
-  DeploymentEntityContextMenu,
-  contextMenuItems,
-  DeploymentDashboardTree,
-  DeploymentDashboardPanel,
-  WorkflowTopBar,
-  WorkflowSideInspector,
-  WorkflowTimeBar
+  EntityHeader
 };
-//# sourceMappingURL=chunk-CUCKULYC.mjs.map
+//# sourceMappingURL=chunk-BH4FNZKK.mjs.map