@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/graph/DiagramNode.esm.js

@@ -0,0 +1,221 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Box from '@massdriver/ui/Box';
+import Chip from '@massdriver/ui/Chip';
+import Divider from '@massdriver/ui/Divider';
+import Skeleton from '@massdriver/ui/Skeleton';
+import Typography from '@massdriver/ui/Typography';
+import IconTile from '@massdriver/ui/IconTile';
+import stylin from '@massdriver/ui/stylin';
+import { useLiveRelayQuery } from '../realtime/useLiveRelayQuery.esm.js';
+import { useOpenLogs } from '../InstanceDrawer/tabs/DeploymentLogsPanel.esm.js';
+import InstanceStatusPill from '../components/InstanceStatusPill.esm.js';
+import VersionBadge from '../../../components/VersionBadge.esm.js';
+import ExpandableHandleWrapper from './handles/ExpandableHandleWrapper.esm.js';
+import NodeVersionBadges from './NodeVersionBadges.esm.js';
+import NodeMeta from './NodeMeta.esm.js';
+import hasUndeployedPlan from './hasUndeployedPlan.esm.js';
+import { NODE_META_QUERY } from './queries.esm.js';
+import { NODE_HEIGHT, NODE_WIDTH } from './DiagramNode.constants.esm.js';
+import { chipClasses } from '@mui/material/Chip';
+import '@mui/material/Drawer';
+import '@mui/material/OutlinedInput';
+import '@mui/material/Select';
+import '@mui/material/ToggleButton';
+
+const DiagramNode = ({
+  id: nodeId,
+  data
+}) => {
+  const {
+    name,
+    icon,
+    version,
+    status,
+    ociRepoName,
+    isSelected,
+    fullInstanceId,
+    dependencyHandles = [],
+    resourceHandles = []
+  } = data;
+  const {
+    value: meta,
+    loading,
+    error
+  } = useLiveRelayQuery(
+    NODE_META_QUERY,
+    fullInstanceId ? { id: fullInstanceId } : null
+  );
+  const instance = meta?.instance ?? null;
+  const undeployedPlan = hasUndeployedPlan({
+    instanceParams: instance?.params,
+    latestProvisionParams: meta?.latestProvision?.items?.[0]?.params
+  });
+  const [isHovering, setIsHovering] = useState(false);
+  const isOpen = isHovering || Boolean(isSelected);
+  const loadingMeta = loading && !instance;
+  const metaError = error && !instance ? error : null;
+  const openLogs = useOpenLogs();
+  const onStatusClick = (deployment) => {
+    if (deployment?.id) openLogs(deployment.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    NodeContainer,
+    {
+      isSelected,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      children: [
+        /* @__PURE__ */ jsxs(NodeSection, { children: [
+          /* @__PURE__ */ jsxs(Row, { children: [
+            /* @__PURE__ */ jsxs(NameRow, { children: [
+              icon && /* @__PURE__ */ jsx(IconTile, { svg: icon, alt: name, size: "small" }),
+              /* @__PURE__ */ jsx(Name, { title: name, children: name }),
+              version && /* @__PURE__ */ jsx(VersionBadge, { version, showPinnedWarning: true })
+            ] }),
+            metaError ? /* @__PURE__ */ jsx(MetaErrorPill, { label: "error", size: "small" }) : fullInstanceId && /* @__PURE__ */ jsx(
+              InstanceStatusPill,
+              {
+                instance: { id: fullInstanceId, status },
+                onClick: onStatusClick,
+                size: "small"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { children: [
+            ociRepoName ? /* @__PURE__ */ jsx(Type, { title: ociRepoName, children: ociRepoName }) : /* @__PURE__ */ jsx("span", {}),
+            metaError ? null : loadingMeta ? /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 64, height: 20 }) : /* @__PURE__ */ jsx(
+              NodeVersionBadges,
+              {
+                availableUpgrade: instance?.availableUpgrade,
+                deployedVersion: instance?.deployedVersion,
+                resolvedVersion: instance?.resolvedVersion,
+                hasUndeployedPlan: undeployedPlan
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        metaError ? /* @__PURE__ */ jsx(MetaErrorWrap, { children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: "Failed to load instance details" }) }) : loadingMeta ? /* @__PURE__ */ jsxs(MetaLoading, { children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "80%" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%" })
+        ] }) : /* @__PURE__ */ jsx(
+          NodeMeta,
+          {
+            alarms: instance?.alarms,
+            cost: instance?.cost,
+            updatedAt: instance?.updatedAt
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ExpandableHandleWrapper,
+          {
+            type: "target",
+            placement: "left",
+            handles: dependencyHandles,
+            nodeId,
+            isOpen
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ExpandableHandleWrapper,
+          {
+            type: "source",
+            placement: "right",
+            handles: resourceHandles,
+            nodeId,
+            isOpen
+          }
+        )
+      ]
+    }
+  );
+};
+const NodeContainer = stylin(Box, ["isSelected"])(
+  ({ theme, isSelected }) => ({
+    position: "relative",
+    padding: theme.spacing(2),
+    border: `2px solid ${isSelected ? theme.palette.primary.dark : theme.palette.grey[400]}`,
+    borderRadius: theme.custom.general.borderRadiusLg,
+    backgroundColor: theme.palette.background.paper,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    width: NODE_WIDTH,
+    height: NODE_HEIGHT,
+    cursor: "pointer"
+  })
+);
+const NodeSection = stylin(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 0.5,
+  minWidth: 0
+});
+const Row = stylin(Box)({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minWidth: 0
+});
+const NameRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: theme.spacing(0.75),
+  minWidth: 0,
+  flex: 1
+}));
+const Name = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontSize: theme.typography.pxToRem(18),
+  fontWeight: 600,
+  fontStyle: "normal",
+  lineHeight: "normal",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+}));
+const Type = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: theme.typography.body2.fontSize,
+  fontWeight: 300,
+  fontStyle: "normal",
+  lineHeight: "normal",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+}));
+const MetaErrorPill = stylin(Chip)(({ theme }) => ({
+  height: "auto",
+  fontSize: theme.typography.pxToRem(11),
+  fontWeight: theme.typography.fontWeightMedium,
+  letterSpacing: "0.3px",
+  textTransform: "lowercase",
+  color: theme.palette.error.main,
+  backgroundColor: `${theme.palette.error.main}1f`,
+  border: `1px solid ${theme.palette.error.main}33`,
+  [`& .${chipClasses.label}`]: {
+    textTransform: "lowercase"
+  }
+}));
+const MetaErrorWrap = stylin(Box)({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: 0
+});
+const MetaLoading = stylin(Box)(({ theme }) => ({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  gap: theme.spacing(0.5)
+}));
+
+export { DiagramNode as default };
+//# sourceMappingURL=DiagramNode.esm.js.map

package/dist/features/environment/graph/DiagramNode.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramNode.esm.js","sources":["../../../../src/features/environment/graph/DiagramNode.tsx"],"sourcesContent":["import { useState } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Chip from '@massdriver/ui/Chip';\nimport Divider from '@massdriver/ui/Divider';\nimport Skeleton from '@massdriver/ui/Skeleton';\nimport Typography from '@massdriver/ui/Typography';\nimport IconTile from '@massdriver/ui/IconTile';\nimport stylin from '@massdriver/ui/stylin';\nimport { useLiveRelayQuery } from '../realtime/useLiveRelayQuery';\nimport { useOpenLogs } from '../InstanceDrawer/tabs/DeploymentLogsPanel';\nimport InstanceStatusPill from '../components/InstanceStatusPill';\nimport VersionBadge from '../../../components/VersionBadge';\nimport ExpandableHandleWrapper from './handles/ExpandableHandleWrapper';\nimport NodeVersionBadges from './NodeVersionBadges';\nimport NodeMeta from './NodeMeta';\nimport hasUndeployedPlan from './hasUndeployedPlan';\nimport { NODE_META_QUERY, type NodeMetaResult } from './queries';\nimport { NODE_WIDTH, NODE_HEIGHT } from './DiagramNode.constants';\nimport type { DiagramNodeData } from './diagramFactory';\nimport { chipClasses } from '../../../theme/muiClasses';\n\n/** React Flow node: an instance card with live per-node metadata. */\nconst DiagramNode = ({\n  id: nodeId,\n  data,\n}: {\n  id: string;\n  data: DiagramNodeData;\n}) => {\n  const {\n    name,\n    icon,\n    version,\n    status,\n    ociRepoName,\n    isSelected,\n    fullInstanceId,\n    dependencyHandles = [],\n    resourceHandles = [],\n  } = data;\n\n  // Live query: cost, alarm dot, and upgrade/redeploy/drift badges refresh on\n  // realtime events (with the node kept rendered — no skeleton flash).\n  const {\n    value: meta,\n    loading,\n    error,\n  } = useLiveRelayQuery<NodeMetaResult>(\n    NODE_META_QUERY,\n    fullInstanceId ? { id: fullInstanceId } : null,\n  );\n\n  const instance = meta?.instance ?? null;\n  const undeployedPlan = hasUndeployedPlan({\n    instanceParams: instance?.params,\n    latestProvisionParams: meta?.latestProvision?.items?.[0]?.params,\n  });\n\n  const [isHovering, setIsHovering] = useState(false);\n  const isOpen = isHovering || Boolean(isSelected);\n  const loadingMeta = loading && !instance;\n  const metaError = error && !instance ? error : null;\n\n  // Clicking an in-flight/failed status pill opens the page-level logs\n  // overlay for that deployment (mirrors the web app's onStatusClick).\n  const openLogs = useOpenLogs();\n  const onStatusClick = (deployment: { id: string } | null) => {\n    if (deployment?.id) openLogs(deployment.id);\n  };\n\n  return (\n    <NodeContainer\n      isSelected={isSelected}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n    >\n      <NodeSection>\n        <Row>\n          <NameRow>\n            {icon && <IconTile svg={icon} alt={name} size=\"small\" />}\n            <Name title={name}>{name}</Name>\n            {version && <VersionBadge version={version} showPinnedWarning />}\n          </NameRow>\n          {metaError ? (\n            <MetaErrorPill label=\"error\" size=\"small\" />\n          ) : (\n            fullInstanceId && (\n              <InstanceStatusPill\n                instance={{ id: fullInstanceId, status }}\n                onClick={onStatusClick}\n                size=\"small\"\n              />\n            )\n          )}\n        </Row>\n        <Row>\n          {ociRepoName ? (\n            <Type title={ociRepoName}>{ociRepoName}</Type>\n          ) : (\n            <span />\n          )}\n          {metaError ? null : loadingMeta ? (\n            <Skeleton variant=\"rounded\" width={64} height={20} />\n          ) : (\n            <NodeVersionBadges\n              availableUpgrade={instance?.availableUpgrade}\n              deployedVersion={instance?.deployedVersion}\n              resolvedVersion={instance?.resolvedVersion}\n              hasUndeployedPlan={undeployedPlan}\n            />\n          )}\n        </Row>\n      </NodeSection>\n      <Divider />\n      {metaError ? (\n        <MetaErrorWrap>\n          <Typography variant=\"caption\" color=\"error\">\n            Failed to load instance details\n          </Typography>\n        </MetaErrorWrap>\n      ) : loadingMeta ? (\n        <MetaLoading>\n          <Skeleton variant=\"text\" width=\"80%\" />\n          <Skeleton variant=\"text\" width=\"60%\" />\n        </MetaLoading>\n      ) : (\n        <NodeMeta\n          alarms={instance?.alarms}\n          cost={instance?.cost}\n          updatedAt={instance?.updatedAt}\n        />\n      )}\n      <ExpandableHandleWrapper\n        type=\"target\"\n        placement=\"left\"\n        handles={dependencyHandles}\n        nodeId={nodeId}\n        isOpen={isOpen}\n      />\n      <ExpandableHandleWrapper\n        type=\"source\"\n        placement=\"right\"\n        handles={resourceHandles}\n        nodeId={nodeId}\n        isOpen={isOpen}\n      />\n    </NodeContainer>\n  );\n};\n\nexport default DiagramNode;\n\nconst NodeContainer = stylin(Box, ['isSelected'])(\n  ({ theme, isSelected }: { theme: any; isSelected?: boolean }) => ({\n    position: 'relative',\n    padding: theme.spacing(2),\n    border: `2px solid ${\n      isSelected ? theme.palette.primary.dark : theme.palette.grey[400]\n    }`,\n    borderRadius: theme.custom.general.borderRadiusLg,\n    backgroundColor: theme.palette.background.paper,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n    width: NODE_WIDTH,\n    height: NODE_HEIGHT,\n    cursor: 'pointer',\n  }),\n);\n\nconst NodeSection = stylin(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 0.5,\n  minWidth: 0,\n});\n\nconst Row = stylin(Box)({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  minWidth: 0,\n});\n\nconst NameRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  gap: theme.spacing(0.75),\n  minWidth: 0,\n  flex: 1,\n}));\n\nconst Name = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.primary,\n  fontSize: theme.typography.pxToRem(18),\n  fontWeight: 600,\n  fontStyle: 'normal',\n  lineHeight: 'normal',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  minWidth: 0,\n}));\n\nconst Type = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: theme.typography.body2.fontSize,\n  fontWeight: 300,\n  fontStyle: 'normal',\n  lineHeight: 'normal',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  minWidth: 0,\n}));\n\nconst MetaErrorPill = stylin(Chip)(({ theme }: { theme: any }) => ({\n  height: 'auto',\n  fontSize: theme.typography.pxToRem(11),\n  fontWeight: theme.typography.fontWeightMedium,\n  letterSpacing: '0.3px',\n  textTransform: 'lowercase',\n  color: theme.palette.error.main,\n  backgroundColor: `${theme.palette.error.main}1f`,\n  border: `1px solid ${theme.palette.error.main}33`,\n  [`& .${chipClasses.label}`]: {\n    textTransform: 'lowercase',\n  },\n}));\n\nconst MetaErrorWrap = stylin(Box)({\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: 0,\n});\n\nconst MetaLoading = stylin(Box)(({ theme }: { theme: any }) => ({\n  flex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  gap: theme.spacing(0.5),\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/graph/NodeMeta.esm.js

@@ -0,0 +1,182 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import Tooltip from '@massdriver/ui/Tooltip';
+import EditIcon from '@massdriver/ui/icons/EditIcon';
+import AttachMoneyIcon from '@massdriver/ui/icons/AttachMoneyIcon';
+import ArrowUpwardIcon from '@massdriver/ui/icons/ArrowUpwardIcon';
+import ArrowDownwardIcon from '@massdriver/ui/icons/ArrowDownwardIcon';
+import NotificationsIcon from '@massdriver/ui/icons/NotificationsIcon';
+import stylin from '@massdriver/ui/stylin';
+import { formatCurrency, formatRelativeTime } from '../../../utils/formatRelativeTime.esm.js';
+
+const ALARM_STATUS = "ALARM";
+const countActiveAlarms = (alarms) => (alarms?.items ?? []).filter(
+  (alarm) => alarm?.currentState?.status === ALARM_STATUS
+).length;
+const NodeMeta = ({
+  alarms,
+  cost,
+  updatedAt
+}) => {
+  const numAlerts = countActiveAlarms(alarms);
+  return /* @__PURE__ */ jsxs(MetaGrid, { children: [
+    /* @__PURE__ */ jsx(AlertsRow, { numAlerts }),
+    /* @__PURE__ */ jsx(
+      CostRow,
+      {
+        label: "yesterday",
+        sample: cost?.lastDay,
+        average: cost?.dailyAverage
+      }
+    ),
+    /* @__PURE__ */ jsx(EditedRow, { updatedAt }),
+    /* @__PURE__ */ jsx(
+      CostRow,
+      {
+        label: "last month",
+        sample: cost?.lastMonth,
+        average: cost?.monthlyAverage
+      }
+    )
+  ] });
+};
+const AlertsRow = ({ numAlerts }) => {
+  const hasAlerts = numAlerts > 0;
+  const label = hasAlerts ? `${numAlerts} active alert${numAlerts === 1 ? "" : "s"}` : "no active alerts";
+  return /* @__PURE__ */ jsxs(Row, { title: label, children: [
+    /* @__PURE__ */ jsx(AlertsIcon, { hasAlerts }),
+    /* @__PURE__ */ jsx(RowText, { hasAlerts, children: label })
+  ] });
+};
+const EditedRow = ({ updatedAt }) => {
+  const label = `last edited ${formatRelativeTime(updatedAt)}`;
+  return /* @__PURE__ */ jsxs(Row, { title: label, children: [
+    /* @__PURE__ */ jsx(EditedIcon, {}),
+    /* @__PURE__ */ jsx(RowText, { children: label })
+  ] });
+};
+const CostRow = ({
+  label,
+  sample,
+  average
+}) => {
+  const amount = sample?.amount;
+  const averageAmount = average?.amount;
+  const currency = sample?.currency || average?.currency || "USD";
+  const hasValue = amount != null;
+  const formatted = formatCurrency(amount, currency, "---");
+  const formattedAverage = averageAmount != null ? formatCurrency(averageAmount, currency, "---") : null;
+  return /* @__PURE__ */ jsxs(Row, { title: `${label}: ${formatted}`, children: [
+    /* @__PURE__ */ jsx(MoneyIcon, { active: hasValue }),
+    /* @__PURE__ */ jsxs(RowText, { children: [
+      label,
+      ":\xA0",
+      hasValue ? /* @__PURE__ */ jsx(
+        CostValue,
+        {
+          formatted,
+          amount,
+          average: averageAmount,
+          formattedAverage
+        }
+      ) : "---"
+    ] })
+  ] });
+};
+const CostValue = ({
+  formatted,
+  amount,
+  average,
+  formattedAverage
+}) => /* @__PURE__ */ jsxs(CostInline, { children: [
+  /* @__PURE__ */ jsx(CostNumber, { children: formatted }),
+  average != null && amount !== average && /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: formattedAverage ? `${formattedAverage} average` : "",
+      arrow: true,
+      placement: "right",
+      children: /* @__PURE__ */ jsx(TrendWrap, { children: amount > average ? /* @__PURE__ */ jsx(TrendUp, { "data-testid": "cost-trend-up" }) : /* @__PURE__ */ jsx(TrendDown, { "data-testid": "cost-trend-down" }) })
+    }
+  )
+] });
+const MetaGrid = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  columnGap: theme.spacing(2),
+  alignContent: "space-evenly",
+  flex: 1,
+  minWidth: 0
+}));
+const Row = stylin(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: 0.75,
+  minWidth: 0,
+  overflow: "hidden"
+});
+const RowText = stylin(Typography, ["hasAlerts"])(
+  ({ theme, hasAlerts }) => ({
+    fontSize: "13px",
+    fontWeight: 400,
+    color: hasAlerts ? theme.palette.error.main : theme.palette.text.secondary,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
+  })
+);
+const EditedIcon = stylin(EditIcon)(({ theme }) => ({
+  width: 16,
+  height: 16,
+  flexShrink: 0,
+  color: theme.palette.text.secondary
+}));
+const AlertsIcon = stylin(NotificationsIcon, ["hasAlerts"])(
+  ({ theme, hasAlerts }) => ({
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+    color: hasAlerts ? theme.palette.error.main : theme.palette.text.secondary
+  })
+);
+const MoneyIcon = stylin(AttachMoneyIcon, ["active"])(
+  ({ theme, active }) => ({
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+    color: active ? theme.palette.success.main : theme.palette.text.secondary
+  })
+);
+const TrendUp = stylin(ArrowUpwardIcon)(({ theme }) => ({
+  width: 14,
+  height: 14,
+  color: theme.palette.error.main
+}));
+const TrendDown = stylin(ArrowDownwardIcon)(({ theme }) => ({
+  width: 14,
+  height: 14,
+  color: theme.palette.success.main
+}));
+const CostInline = stylin("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 0.25,
+  minWidth: 0
+});
+const CostNumber = stylin("span")({
+  fontWeight: 600,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+});
+const TrendWrap = stylin("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0
+});
+
+export { countActiveAlarms, NodeMeta as default };
+//# sourceMappingURL=NodeMeta.esm.js.map

package/dist/features/environment/graph/NodeMeta.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeMeta.esm.js","sources":["../../../../src/features/environment/graph/NodeMeta.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport EditIcon from '@massdriver/ui/icons/EditIcon';\nimport AttachMoneyIcon from '@massdriver/ui/icons/AttachMoneyIcon';\nimport ArrowUpwardIcon from '@massdriver/ui/icons/ArrowUpwardIcon';\nimport ArrowDownwardIcon from '@massdriver/ui/icons/ArrowDownwardIcon';\nimport NotificationsIcon from '@massdriver/ui/icons/NotificationsIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport {\n  formatCurrency,\n  formatRelativeTime,\n} from '../../../utils/formatRelativeTime';\nimport type { AlarmItem, Money, NodeCost } from './queries';\n\nconst ALARM_STATUS = 'ALARM';\n\nexport const countActiveAlarms = (\n  alarms?: { items?: (AlarmItem | null)[] | null } | null,\n): number =>\n  (alarms?.items ?? []).filter(\n    alarm => alarm?.currentState?.status === ALARM_STATUS,\n  ).length;\n\n/** The 2×2 meta grid on a diagram node: alarms / cost / last-edited. */\nconst NodeMeta = ({\n  alarms,\n  cost,\n  updatedAt,\n}: {\n  alarms?: { items?: (AlarmItem | null)[] | null } | null;\n  cost?: NodeCost | null;\n  updatedAt?: string | null;\n}) => {\n  const numAlerts = countActiveAlarms(alarms);\n\n  return (\n    <MetaGrid>\n      <AlertsRow numAlerts={numAlerts} />\n      <CostRow\n        label=\"yesterday\"\n        sample={cost?.lastDay}\n        average={cost?.dailyAverage}\n      />\n      <EditedRow updatedAt={updatedAt} />\n      <CostRow\n        label=\"last month\"\n        sample={cost?.lastMonth}\n        average={cost?.monthlyAverage}\n      />\n    </MetaGrid>\n  );\n};\n\nconst AlertsRow = ({ numAlerts }: { numAlerts: number }) => {\n  const hasAlerts = numAlerts > 0;\n  const label = hasAlerts\n    ? `${numAlerts} active alert${numAlerts === 1 ? '' : 's'}`\n    : 'no active alerts';\n\n  return (\n    <Row title={label}>\n      <AlertsIcon hasAlerts={hasAlerts} />\n      <RowText hasAlerts={hasAlerts}>{label}</RowText>\n    </Row>\n  );\n};\n\nconst EditedRow = ({ updatedAt }: { updatedAt?: string | null }) => {\n  const label = `last edited ${formatRelativeTime(updatedAt)}`;\n  return (\n    <Row title={label}>\n      <EditedIcon />\n      <RowText>{label}</RowText>\n    </Row>\n  );\n};\n\nconst CostRow = ({\n  label,\n  sample,\n  average,\n}: {\n  label: string;\n  sample?: Money | null;\n  average?: Money | null;\n}) => {\n  const amount = sample?.amount;\n  const averageAmount = average?.amount;\n  const currency = sample?.currency || average?.currency || 'USD';\n  const hasValue = amount != null;\n  const formatted = formatCurrency(amount, currency, '---');\n  const formattedAverage =\n    averageAmount != null\n      ? formatCurrency(averageAmount, currency, '---')\n      : null;\n\n  return (\n    <Row title={`${label}: ${formatted}`}>\n      <MoneyIcon active={hasValue} />\n      <RowText>\n        {label}:&nbsp;\n        {hasValue ? (\n          <CostValue\n            formatted={formatted}\n            amount={amount!}\n            average={averageAmount}\n            formattedAverage={formattedAverage}\n          />\n        ) : (\n          '---'\n        )}\n      </RowText>\n    </Row>\n  );\n};\n\nconst CostValue = ({\n  formatted,\n  amount,\n  average,\n  formattedAverage,\n}: {\n  formatted: string;\n  amount: number;\n  average?: number | null;\n  formattedAverage?: string | null;\n}) => (\n  <CostInline>\n    <CostNumber>{formatted}</CostNumber>\n    {average != null && amount !== average && (\n      <Tooltip\n        title={formattedAverage ? `${formattedAverage} average` : ''}\n        arrow\n        placement=\"right\"\n      >\n        <TrendWrap>\n          {amount > average ? (\n            <TrendUp data-testid=\"cost-trend-up\" />\n          ) : (\n            <TrendDown data-testid=\"cost-trend-down\" />\n          )}\n        </TrendWrap>\n      </Tooltip>\n    )}\n  </CostInline>\n);\n\nexport default NodeMeta;\n\nconst MetaGrid = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'grid',\n  gridTemplateColumns: '1fr 1fr',\n  columnGap: theme.spacing(2),\n  alignContent: 'space-evenly',\n  flex: 1,\n  minWidth: 0,\n}));\n\nconst Row = stylin(Box)({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 0.75,\n  minWidth: 0,\n  overflow: 'hidden',\n});\n\nconst RowText = stylin(Typography, ['hasAlerts'])(\n  ({ theme, hasAlerts }: { theme: any; hasAlerts?: boolean }) => ({\n    fontSize: '13px',\n    fontWeight: 400,\n    color: hasAlerts ? theme.palette.error.main : theme.palette.text.secondary,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  }),\n);\n\nconst EditedIcon = stylin(EditIcon)(({ theme }: { theme: any }) => ({\n  width: 16,\n  height: 16,\n  flexShrink: 0,\n  color: theme.palette.text.secondary,\n}));\n\nconst AlertsIcon = stylin(NotificationsIcon, ['hasAlerts'])(\n  ({ theme, hasAlerts }: { theme: any; hasAlerts?: boolean }) => ({\n    width: 16,\n    height: 16,\n    flexShrink: 0,\n    color: hasAlerts ? theme.palette.error.main : theme.palette.text.secondary,\n  }),\n);\n\nconst MoneyIcon = stylin(AttachMoneyIcon, ['active'])(\n  ({ theme, active }: { theme: any; active?: boolean }) => ({\n    width: 16,\n    height: 16,\n    flexShrink: 0,\n    color: active ? theme.palette.success.main : theme.palette.text.secondary,\n  }),\n);\n\nconst TrendUp = stylin(ArrowUpwardIcon)(({ theme }: { theme: any }) => ({\n  width: 14,\n  height: 14,\n  color: theme.palette.error.main,\n}));\n\nconst TrendDown = stylin(ArrowDownwardIcon)(({ theme }: { theme: any }) => ({\n  width: 14,\n  height: 14,\n  color: theme.palette.success.main,\n}));\n\nconst CostInline = stylin('span')({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 0.25,\n  minWidth: 0,\n});\n\nconst CostNumber = stylin('span')({\n  fontWeight: 600,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  minWidth: 0,\n});\n\nconst TrendWrap = stylin('span')({\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexShrink: 0,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,OAAA;AAEd,MAAM,oBAAoB,CAC/B,MAAA,KAAA,CAEC,MAAA,EAAQ,KAAA,IAAS,EAAC,EAAG,MAAA;AAAA,EACpB,CAAA,KAAA,KAAS,KAAA,EAAO,YAAA,EAAc,MAAA,KAAW;AAC3C,CAAA,CAAE;AAGJ,MAAM,WAAW,CAAC;AAAA,EAChB,MAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAIM;AACJ,EAAA,MAAM,SAAA,GAAY,kBAAkB,MAAM,CAAA;AAE1C,EAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aAAU,SAAA,EAAsB,CAAA;AAAA,oBACjC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,WAAA;AAAA,QACN,QAAQ,IAAA,EAAM,OAAA;AAAA,QACd,SAAS,IAAA,EAAM;AAAA;AAAA,KACjB;AAAA,oBACA,GAAA,CAAC,aAAU,SAAA,EAAsB,CAAA;AAAA,oBACjC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,YAAA;AAAA,QACN,QAAQ,IAAA,EAAM,SAAA;AAAA,QACd,SAAS,IAAA,EAAM;AAAA;AAAA;AACjB,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,EAAE,SAAA,EAAU,KAA6B;AAC1D,EAAA,MAAM,YAAY,SAAA,GAAY,CAAA;AAC9B,EAAA,MAAM,KAAA,GAAQ,YACV,CAAA,EAAG,SAAS,gBAAgB,SAAA,KAAc,CAAA,GAAI,EAAA,GAAK,GAAG,CAAA,CAAA,GACtD,kBAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAO,KAAA,EACV,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,SAAA,EAAsB,CAAA;AAAA,oBAClC,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAuB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxC,CAAA;AAEJ,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,EAAE,SAAA,EAAU,KAAqC;AAClE,EAAA,MAAM,KAAA,GAAQ,CAAA,YAAA,EAAe,kBAAA,CAAmB,SAAS,CAAC,CAAA,CAAA;AAC1D,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAO,KAAA,EACV,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA;AAAA,oBACZ,GAAA,CAAC,WAAS,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAA;AAEA,MAAM,UAAU,CAAC;AAAA,EACf,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAIM;AACJ,EAAA,MAAM,SAAS,MAAA,EAAQ,MAAA;AACvB,EAAA,MAAM,gBAAgB,OAAA,EAAS,MAAA;AAC/B,EAAA,MAAM,QAAA,GAAW,MAAA,EAAQ,QAAA,IAAY,OAAA,EAAS,QAAA,IAAY,KAAA;AAC1D,EAAA,MAAM,WAAW,MAAA,IAAU,IAAA;AAC3B,EAAA,MAAM,SAAA,GAAY,cAAA,CAAe,MAAA,EAAQ,QAAA,EAAU,KAAK,CAAA;AACxD,EAAA,MAAM,mBACJ,aAAA,IAAiB,IAAA,GACb,eAAe,aAAA,EAAe,QAAA,EAAU,KAAK,CAAA,GAC7C,IAAA;AAEN,EAAA,4BACG,GAAA,EAAA,EAAI,KAAA,EAAO,GAAG,KAAK,CAAA,EAAA,EAAK,SAAS,CAAA,CAAA,EAChC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,QAAQ,QAAA,EAAU,CAAA;AAAA,yBAC5B,OAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MAAM,OAAA;AAAA,MACN,QAAA,mBACC,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,MAAA;AAAA,UACA,OAAA,EAAS,aAAA;AAAA,UACT;AAAA;AAAA,OACF,GAEA;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,MAAM,YAAY,CAAC;AAAA,EACjB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,0BAMG,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,cAAY,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,EACtB,OAAA,IAAW,IAAA,IAAQ,MAAA,KAAW,OAAA,oBAC7B,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,gBAAA,GAAmB,CAAA,EAAG,gBAAgB,CAAA,QAAA,CAAA,GAAa,EAAA;AAAA,MAC1D,KAAA,EAAK,IAAA;AAAA,MACL,SAAA,EAAU,OAAA;AAAA,MAEV,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EACE,QAAA,EAAA,MAAA,GAAS,OAAA,mBACR,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAY,eAAA,EAAgB,CAAA,mBAErC,GAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAY,mBAAkB,CAAA,EAE7C;AAAA;AAAA;AACF,CAAA,EAEJ,CAAA;AAKF,MAAM,WAAW,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC3D,OAAA,EAAS,MAAA;AAAA,EACT,mBAAA,EAAqB,SAAA;AAAA,EACrB,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EAC1B,YAAA,EAAc,cAAA;AAAA,EACd,IAAA,EAAM,CAAA;AAAA,EACN,QAAA,EAAU;AACZ,CAAA,CAAE,CAAA;AAEF,MAAM,GAAA,GAAM,MAAA,CAAO,GAAG,CAAA,CAAE;AAAA,EACtB,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,IAAA;AAAA,EACL,QAAA,EAAU,CAAA;AAAA,EACV,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAU,MAAA,CAAO,UAAA,EAAY,CAAC,WAAW,CAAC,CAAA;AAAA,EAC9C,CAAC,EAAE,KAAA,EAAO,SAAA,EAAU,MAA4C;AAAA,IAC9D,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,GAAA;AAAA,IACZ,KAAA,EAAO,YAAY,KAAA,CAAM,OAAA,CAAQ,MAAM,IAAA,GAAO,KAAA,CAAM,QAAQ,IAAA,CAAK,SAAA;AAAA,IACjE,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,UAAA,EAAY,QAAA;AAAA,IACZ,QAAA,EAAU;AAAA,GACZ;AACF,CAAA;AAEA,MAAM,aAAa,MAAA,CAAO,QAAQ,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAClE,KAAA,EAAO,EAAA;AAAA,EACP,MAAA,EAAQ,EAAA;AAAA,EACR,UAAA,EAAY,CAAA;AAAA,EACZ,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAC5B,CAAA,CAAE,CAAA;AAEF,MAAM,UAAA,GAAa,MAAA,CAAO,iBAAA,EAAmB,CAAC,WAAW,CAAC,CAAA;AAAA,EACxD,CAAC,EAAE,KAAA,EAAO,SAAA,EAAU,MAA4C;AAAA,IAC9D,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,UAAA,EAAY,CAAA;AAAA,IACZ,KAAA,EAAO,YAAY,KAAA,CAAM,OAAA,CAAQ,MAAM,IAAA,GAAO,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA,GACnE;AACF,CAAA;AAEA,MAAM,SAAA,GAAY,MAAA,CAAO,eAAA,EAAiB,CAAC,QAAQ,CAAC,CAAA;AAAA,EAClD,CAAC,EAAE,KAAA,EAAO,MAAA,EAAO,MAAyC;AAAA,IACxD,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,UAAA,EAAY,CAAA;AAAA,IACZ,KAAA,EAAO,SAAS,KAAA,CAAM,OAAA,CAAQ,QAAQ,IAAA,GAAO,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA,GAClE;AACF,CAAA;AAEA,MAAM,UAAU,MAAA,CAAO,eAAe,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EACtE,KAAA,EAAO,EAAA;AAAA,EACP,MAAA,EAAQ,EAAA;AAAA,EACR,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM;AAC7B,CAAA,CAAE,CAAA;AAEF,MAAM,YAAY,MAAA,CAAO,iBAAiB,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC1E,KAAA,EAAO,EAAA;AAAA,EACP,MAAA,EAAQ,EAAA;AAAA,EACR,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ;AAC/B,CAAA,CAAE,CAAA;AAEF,MAAM,UAAA,GAAa,MAAA,CAAO,MAAM,CAAA,CAAE;AAAA,EAChC,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,IAAA;AAAA,EACL,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,UAAA,GAAa,MAAA,CAAO,MAAM,CAAA,CAAE;AAAA,EAChC,UAAA,EAAY,GAAA;AAAA,EACZ,QAAA,EAAU,QAAA;AAAA,EACV,YAAA,EAAc,UAAA;AAAA,EACd,UAAA,EAAY,QAAA;AAAA,EACZ,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,SAAA,GAAY,MAAA,CAAO,MAAM,CAAA,CAAE;AAAA,EAC/B,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAC,CAAA;;;;"}

package/dist/features/environment/graph/NodeVersionBadges.esm.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { alpha } from '@massdriver/ui/theme';
+import Box from '@massdriver/ui/Box';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Typography from '@massdriver/ui/Typography';
+import ArrowUpwardIcon from '@massdriver/ui/icons/ArrowUpwardIcon';
+import RefreshIcon from '@massdriver/ui/icons/RefreshIcon';
+import stylin from '@massdriver/ui/stylin';
+
+const NodeVersionBadges = ({
+  availableUpgrade,
+  deployedVersion,
+  resolvedVersion,
+  hasUndeployedPlan
+}) => {
+  const showUpgrade = Boolean(availableUpgrade);
+  const versionDrift = Boolean(
+    deployedVersion && resolvedVersion && deployedVersion !== resolvedVersion
+  );
+  const showRedeploy = versionDrift || Boolean(hasUndeployedPlan);
+  return !showUpgrade && !showRedeploy ? null : /* @__PURE__ */ jsxs(Row, { children: [
+    showUpgrade && /* @__PURE__ */ jsx(UpgradeBadge, { availableUpgrade }),
+    showRedeploy && /* @__PURE__ */ jsx(
+      RedeployBadge,
+      {
+        deployedVersion,
+        resolvedVersion,
+        hasUndeployedPlan
+      }
+    )
+  ] });
+};
+const UpgradeBadge = ({
+  availableUpgrade
+}) => !availableUpgrade ? null : /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    arrow: true,
+    enterDelay: 400,
+    title: `A version upgrade to v${availableUpgrade} is available.`,
+    children: /* @__PURE__ */ jsxs(UpgradeRoot, { children: [
+      /* @__PURE__ */ jsx(UpArrow, {}),
+      /* @__PURE__ */ jsxs(VersionText, { children: [
+        "v",
+        availableUpgrade
+      ] })
+    ] })
+  }
+);
+const RedeployBadge = ({
+  deployedVersion,
+  resolvedVersion,
+  hasUndeployedPlan
+}) => {
+  const versionDrift = Boolean(
+    deployedVersion && resolvedVersion && deployedVersion !== resolvedVersion
+  );
+  return !versionDrift && !hasUndeployedPlan ? null : /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      arrow: true,
+      enterDelay: 400,
+      title: /* @__PURE__ */ jsxs(TooltipBody, { children: [
+        /* @__PURE__ */ jsx(TooltipTitle, { children: "Redeploy needed" }),
+        /* @__PURE__ */ jsxs(BulletList, { children: [
+          versionDrift && /* @__PURE__ */ jsxs(BulletItem, { children: [
+            "Bundle version is out of date (currently",
+            " ",
+            /* @__PURE__ */ jsxs(Mono, { children: [
+              "v",
+              deployedVersion
+            ] }),
+            ")"
+          ] }),
+          hasUndeployedPlan && /* @__PURE__ */ jsx(BulletItem, { children: "Planned changes have not been deployed" })
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsx(RedeployRoot, { children: /* @__PURE__ */ jsx(RefreshGlyph, {}) })
+    }
+  );
+};
+const Row = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  flexShrink: 0
+}));
+const UpgradeRoot = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.25),
+  padding: theme.spacing(0.25, 0.75),
+  borderRadius: 1,
+  lineHeight: 1,
+  backgroundColor: alpha(theme.palette.info.light, 0.2),
+  color: theme.palette.info.dark,
+  border: `1px solid ${theme.palette.info.main}`
+}));
+const UpArrow = stylin(ArrowUpwardIcon)({
+  fontSize: 12
+});
+const VersionText = stylin("span")(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  color: "inherit",
+  lineHeight: 1,
+  fontFamily: theme.typography.fontFamilyMono
+}));
+const RedeployRoot = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  backgroundColor: alpha(theme.palette.warning.main, 0.12),
+  color: theme.palette.warning.main,
+  border: `1px solid ${alpha(theme.palette.warning.main, 0.3)}`
+}));
+const RefreshGlyph = stylin(RefreshIcon)({
+  fontSize: 14
+});
+const TooltipBody = stylin(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 0.5
+});
+const TooltipTitle = stylin(Typography)({
+  fontSize: 12,
+  fontWeight: 600,
+  color: "inherit"
+});
+const BulletList = stylin("ul")(({ theme }) => ({
+  margin: 0,
+  paddingLeft: theme.spacing(2),
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.25)
+}));
+const BulletItem = stylin("li")({
+  fontSize: 11,
+  lineHeight: 1.4,
+  color: "inherit"
+});
+const Mono = stylin("span")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamilyMono
+}));
+
+export { NodeVersionBadges as default };
+//# sourceMappingURL=NodeVersionBadges.esm.js.map

package/dist/features/environment/graph/NodeVersionBadges.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeVersionBadges.esm.js","sources":["../../../../src/features/environment/graph/NodeVersionBadges.tsx"],"sourcesContent":["import { alpha } from '@massdriver/ui/theme';\nimport Box from '@massdriver/ui/Box';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Typography from '@massdriver/ui/Typography';\nimport ArrowUpwardIcon from '@massdriver/ui/icons/ArrowUpwardIcon';\nimport RefreshIcon from '@massdriver/ui/icons/RefreshIcon';\nimport stylin from '@massdriver/ui/stylin';\n\n// Read-only port of NodeVersionBadges. The interactive ProposedDeploymentBadge\n// (which navigates on click) is dropped; the passive upgrade + redeploy badges\n// are kept.\n\nconst NodeVersionBadges = ({\n  availableUpgrade,\n  deployedVersion,\n  resolvedVersion,\n  hasUndeployedPlan,\n}: {\n  availableUpgrade?: string | null;\n  deployedVersion?: string | null;\n  resolvedVersion?: string | null;\n  hasUndeployedPlan?: boolean;\n}) => {\n  const showUpgrade = Boolean(availableUpgrade);\n  const versionDrift = Boolean(\n    deployedVersion && resolvedVersion && deployedVersion !== resolvedVersion,\n  );\n  const showRedeploy = versionDrift || Boolean(hasUndeployedPlan);\n\n  return !showUpgrade && !showRedeploy ? null : (\n    <Row>\n      {showUpgrade && <UpgradeBadge availableUpgrade={availableUpgrade} />}\n      {showRedeploy && (\n        <RedeployBadge\n          deployedVersion={deployedVersion}\n          resolvedVersion={resolvedVersion}\n          hasUndeployedPlan={hasUndeployedPlan}\n        />\n      )}\n    </Row>\n  );\n};\n\nexport default NodeVersionBadges;\n\nconst UpgradeBadge = ({\n  availableUpgrade,\n}: {\n  availableUpgrade?: string | null;\n}) =>\n  !availableUpgrade ? null : (\n    <Tooltip\n      arrow\n      enterDelay={400}\n      title={`A version upgrade to v${availableUpgrade} is available.`}\n    >\n      <UpgradeRoot>\n        <UpArrow />\n        <VersionText>v{availableUpgrade}</VersionText>\n      </UpgradeRoot>\n    </Tooltip>\n  );\n\nconst RedeployBadge = ({\n  deployedVersion,\n  resolvedVersion,\n  hasUndeployedPlan,\n}: {\n  deployedVersion?: string | null;\n  resolvedVersion?: string | null;\n  hasUndeployedPlan?: boolean;\n}) => {\n  const versionDrift = Boolean(\n    deployedVersion && resolvedVersion && deployedVersion !== resolvedVersion,\n  );\n\n  return !versionDrift && !hasUndeployedPlan ? null : (\n    <Tooltip\n      arrow\n      enterDelay={400}\n      title={\n        <TooltipBody>\n          <TooltipTitle>Redeploy needed</TooltipTitle>\n          <BulletList>\n            {versionDrift && (\n              <BulletItem>\n                Bundle version is out of date (currently{' '}\n                <Mono>v{deployedVersion}</Mono>)\n              </BulletItem>\n            )}\n            {hasUndeployedPlan && (\n              <BulletItem>Planned changes have not been deployed</BulletItem>\n            )}\n          </BulletList>\n        </TooltipBody>\n      }\n    >\n      <RedeployRoot>\n        <RefreshGlyph />\n      </RedeployRoot>\n    </Tooltip>\n  );\n};\n\nconst Row = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  flexShrink: 0,\n}));\n\nconst UpgradeRoot = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.25),\n  padding: theme.spacing(0.25, 0.75),\n  borderRadius: 1,\n  lineHeight: 1,\n  backgroundColor: alpha(theme.palette.info.light, 0.2),\n  color: theme.palette.info.dark,\n  border: `1px solid ${theme.palette.info.main}`,\n}));\n\nconst UpArrow = stylin(ArrowUpwardIcon)({\n  fontSize: 12,\n});\n\nconst VersionText = stylin('span')(({ theme }: { theme: any }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  color: 'inherit',\n  lineHeight: 1,\n  fontFamily: theme.typography.fontFamilyMono,\n}));\n\nconst RedeployRoot = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 20,\n  height: 20,\n  borderRadius: '50%',\n  backgroundColor: alpha(theme.palette.warning.main, 0.12),\n  color: theme.palette.warning.main,\n  border: `1px solid ${alpha(theme.palette.warning.main, 0.3)}`,\n}));\n\nconst RefreshGlyph = stylin(RefreshIcon)({\n  fontSize: 14,\n});\n\nconst TooltipBody = stylin(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 0.5,\n});\n\nconst TooltipTitle = stylin(Typography)({\n  fontSize: 12,\n  fontWeight: 600,\n  color: 'inherit',\n});\n\nconst BulletList = stylin('ul')(({ theme }: { theme: any }) => ({\n  margin: 0,\n  paddingLeft: theme.spacing(2),\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.25),\n}));\n\nconst BulletItem = stylin('li')({\n  fontSize: 11,\n  lineHeight: 1.4,\n  color: 'inherit',\n});\n\nconst Mono = stylin('span')(({ theme }: { theme: any }) => ({\n  fontFamily: theme.typography.fontFamilyMono,\n}));\n"],"names":[],"mappings":"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"}