@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/InstanceDrawer/AlarmCard.esm.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import ErrorOutlineIcon from '@massdriver/ui/icons/ErrorOutlineIcon';
+import CheckCircleOutlineIcon from '@massdriver/ui/icons/CheckCircleOutlineIcon';
+import stylin from '@massdriver/ui/stylin';
+import { isFiring, getSeverity, formatMetricLine, describeThreshold, getStatusLabel, formatAbsoluteDateTime, formatAlarmDimensions } from './helpers.esm.js';
+
+const AlarmCard = ({ alarm }) => {
+  const firing = isFiring(alarm);
+  const severity = getSeverity(alarm);
+  const metricLine = formatMetricLine(alarm.metric);
+  const dimensions = alarm.metric?.dimensions ?? [];
+  const threshold = describeThreshold(alarm);
+  const occurredAt = alarm.currentState?.occurredAt;
+  const message = alarm.currentState?.message;
+  const displayName = alarm.displayName || "Unnamed alarm";
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(Header, { severity, children: [
+      /* @__PURE__ */ jsxs(HeaderLeft, { children: [
+        firing ? /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: "inherit" }) : alarm.currentState ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { fontSize: "inherit" }) : null,
+        /* @__PURE__ */ jsx(HeaderLabel, { children: getStatusLabel(alarm.currentState) })
+      ] }),
+      occurredAt ? /* @__PURE__ */ jsxs(HeaderTime, { children: [
+        firing ? "Triggered" : "Last cleared",
+        " ",
+        formatAbsoluteDateTime(occurredAt)
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Body, { children: [
+      /* @__PURE__ */ jsx(Title, { title: displayName, children: displayName }),
+      metricLine ? /* @__PURE__ */ jsx(MetricLine, { title: metricLine, children: metricLine }) : null,
+      threshold ? /* @__PURE__ */ jsxs(ThresholdBlock, { children: [
+        /* @__PURE__ */ jsx(ThresholdLabel, { children: "Triggers when" }),
+        " ",
+        /* @__PURE__ */ jsx(ThresholdValue, { children: threshold })
+      ] }) : null,
+      message ? /* @__PURE__ */ jsx(Message, { children: message }) : null,
+      dimensions.length ? /* @__PURE__ */ jsx(DimensionsFooter, { title: formatAlarmDimensions(dimensions), children: formatAlarmDimensions(dimensions) }) : null
+    ] })
+  ] });
+};
+const Card = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: 1,
+  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper,
+  overflow: "hidden"
+}));
+const Header = stylin(Box, ["severity"])(
+  ({ theme, severity }) => {
+    const palette = {
+      firing: {
+        color: theme.palette.error.contrastText,
+        backgroundColor: theme.palette.error.main
+      },
+      ok: {
+        color: theme.palette.success.dark,
+        backgroundColor: theme.palette.success.lighter ?? theme.palette.success.light
+      },
+      unknown: {
+        color: theme.palette.text.secondary,
+        backgroundColor: theme.palette.action.hover
+      }
+    };
+    const tone = palette[severity] ?? palette.unknown;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: theme.spacing(1),
+      padding: theme.spacing(0.5, 1.25),
+      color: tone.color,
+      backgroundColor: tone.backgroundColor,
+      fontSize: theme.typography.pxToRem(11)
+    };
+  }
+);
+const HeaderLeft = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  fontSize: 14
+}));
+const HeaderLabel = stylin(Box)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  fontSize: theme.typography.pxToRem(10)
+}));
+const HeaderTime = stylin(Box)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  opacity: 0.95
+}));
+const Body = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.75),
+  padding: theme.spacing(1.25)
+}));
+const Title = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(14),
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const MetricLine = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.secondary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const ThresholdBlock = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(0.75, 1),
+  borderRadius: 1,
+  backgroundColor: theme.palette.action.hover,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: 1.4
+}));
+const ThresholdLabel = stylin("span")(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const ThresholdValue = stylin("span")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: 500
+}));
+const Message = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.secondary,
+  lineHeight: 1.4,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+}));
+const DimensionsFooter = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  color: theme.palette.text.disabled,
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  lineHeight: 1.4,
+  wordBreak: "break-all"
+}));
+
+export { AlarmCard, AlarmCard as default };
+//# sourceMappingURL=AlarmCard.esm.js.map

package/dist/features/environment/InstanceDrawer/AlarmCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmCard.esm.js","sources":["../../../../src/features/environment/InstanceDrawer/AlarmCard.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport ErrorOutlineIcon from '@massdriver/ui/icons/ErrorOutlineIcon';\nimport CheckCircleOutlineIcon from '@massdriver/ui/icons/CheckCircleOutlineIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport {\n  describeThreshold,\n  formatAbsoluteDateTime,\n  formatAlarmDimensions,\n  formatMetricLine,\n  getSeverity,\n  getStatusLabel,\n  isFiring,\n} from './helpers';\nimport type { Alarm } from './types';\n\n/** Read-only alarm card, faithful port of the web app's AlarmCard. */\nexport const AlarmCard = ({ alarm }: { alarm: Alarm }) => {\n  const firing = isFiring(alarm);\n  const severity = getSeverity(alarm);\n  const metricLine = formatMetricLine(alarm.metric);\n  const dimensions = alarm.metric?.dimensions ?? [];\n  const threshold = describeThreshold(alarm);\n  const occurredAt = alarm.currentState?.occurredAt;\n  const message = alarm.currentState?.message;\n  const displayName = alarm.displayName || 'Unnamed alarm';\n\n  return (\n    <Card>\n      <Header severity={severity}>\n        <HeaderLeft>\n          {firing ? (\n            <ErrorOutlineIcon fontSize=\"inherit\" />\n          ) : alarm.currentState ? (\n            <CheckCircleOutlineIcon fontSize=\"inherit\" />\n          ) : null}\n          <HeaderLabel>{getStatusLabel(alarm.currentState)}</HeaderLabel>\n        </HeaderLeft>\n        {occurredAt ? (\n          <HeaderTime>\n            {firing ? 'Triggered' : 'Last cleared'}{' '}\n            {formatAbsoluteDateTime(occurredAt)}\n          </HeaderTime>\n        ) : null}\n      </Header>\n      <Body>\n        <Title title={displayName}>{displayName}</Title>\n        {metricLine ? (\n          <MetricLine title={metricLine}>{metricLine}</MetricLine>\n        ) : null}\n        {threshold ? (\n          <ThresholdBlock>\n            <ThresholdLabel>Triggers when</ThresholdLabel>{' '}\n            <ThresholdValue>{threshold}</ThresholdValue>\n          </ThresholdBlock>\n        ) : null}\n        {message ? <Message>{message}</Message> : null}\n        {dimensions.length ? (\n          <DimensionsFooter title={formatAlarmDimensions(dimensions)}>\n            {formatAlarmDimensions(dimensions)}\n          </DimensionsFooter>\n        ) : null}\n      </Body>\n    </Card>\n  );\n};\n\nexport default AlarmCard;\n\nconst Card = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  borderRadius: 1,\n  border: `1px solid ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n  overflow: 'hidden',\n}));\n\nconst Header = stylin(Box, ['severity'])(\n  ({ theme, severity }: { theme: any; severity: string }) => {\n    const palette: Record<string, { color: string; backgroundColor: string }> =\n      {\n        firing: {\n          color: theme.palette.error.contrastText,\n          backgroundColor: theme.palette.error.main,\n        },\n        ok: {\n          color: theme.palette.success.dark,\n          backgroundColor:\n            theme.palette.success.lighter ?? theme.palette.success.light,\n        },\n        unknown: {\n          color: theme.palette.text.secondary,\n          backgroundColor: theme.palette.action.hover,\n        },\n      };\n    const tone = palette[severity] ?? palette.unknown;\n    return {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: theme.spacing(1),\n      padding: theme.spacing(0.5, 1.25),\n      color: tone.color,\n      backgroundColor: tone.backgroundColor,\n      fontSize: theme.typography.pxToRem(11),\n    };\n  },\n);\n\nconst HeaderLeft = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  fontSize: 14,\n}));\n\nconst HeaderLabel = stylin(Box)(({ theme }: { theme: any }) => ({\n  fontWeight: 600,\n  letterSpacing: '0.04em',\n  textTransform: 'uppercase',\n  fontSize: theme.typography.pxToRem(10),\n}));\n\nconst HeaderTime = stylin(Box)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(11),\n  opacity: 0.95,\n}));\n\nconst Body = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.75),\n  padding: theme.spacing(1.25),\n}));\n\nconst Title = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(14),\n  fontWeight: 600,\n  color: theme.palette.text.primary,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst MetricLine = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(12),\n  color: theme.palette.text.secondary,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst ThresholdBlock = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(0.75, 1),\n  borderRadius: 1,\n  backgroundColor: theme.palette.action.hover,\n  fontSize: theme.typography.pxToRem(12),\n  lineHeight: 1.4,\n}));\n\nconst ThresholdLabel = stylin('span')(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n}));\n\nconst ThresholdValue = stylin('span')(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.primary,\n  fontWeight: 500,\n}));\n\nconst Message = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(12),\n  color: theme.palette.text.secondary,\n  lineHeight: 1.4,\n  whiteSpace: 'pre-wrap',\n  wordBreak: 'break-word',\n}));\n\nconst DimensionsFooter = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(11),\n  color: theme.palette.text.disabled,\n  display: '-webkit-box',\n  WebkitLineClamp: 2,\n  WebkitBoxOrient: 'vertical',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  lineHeight: 1.4,\n  wordBreak: 'break-all',\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/InstanceDrawer/InstanceDrawer.esm.js

@@ -0,0 +1,165 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { useSearchParams } from 'react-router-dom';
+import { parseEnvironmentId, composeInstanceId, instanceUrl } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import Alert from '@massdriver/ui/Alert';
+import LoadingIndicator from '@massdriver/ui/LoadingIndicator';
+import stylin from '@massdriver/ui/stylin';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { NotFound } from '../../../components/NotFound.esm.js';
+import { useInstanceApiQuery } from './useInstanceApiQuery.esm.js';
+import { useResizableWidth } from './useResizableWidth.esm.js';
+import { PANEL_QUERY } from './queries.esm.js';
+import { InstanceDrawerHeader } from './InstanceDrawerHeader.esm.js';
+import { InstanceTabs } from './InstanceTabs.esm.js';
+import { ConfigTab } from './tabs/ConfigTab.esm.js';
+import { OverviewTab } from './tabs/OverviewTab.esm.js';
+import { ResourcesTab } from './tabs/ResourcesTab.esm.js';
+import { DependenciesTab } from './tabs/DependenciesTab.esm.js';
+import { MonitorTab } from './tabs/MonitorTab.esm.js';
+import { HistoryTab } from './tabs/HistoryTab.esm.js';
+import { GuideTab } from './tabs/GuideTab.esm.js';
+import { SecretsTab } from './tabs/SecretsTab.esm.js';
+
+const DEFAULT_TAB = "overview";
+const BASE_TABS = [
+  { id: "overview", label: "Overview" },
+  { id: "config", label: "Config" },
+  { id: "history", label: "History" },
+  { id: "monitor", label: "Monitor" },
+  { id: "guide", label: "Guide" },
+  { id: "dependencies", label: "Dependencies" },
+  { id: "resources", label: "Resources" }
+];
+const InstanceDrawer = ({
+  projectId,
+  environmentId,
+  scopedComponentId,
+  onClose
+}) => {
+  const api = useApi(massdriverApiRef);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { width, panelRef, onResizeStart } = useResizableWidth();
+  const isOpen = Boolean(scopedComponentId);
+  const activeTab = searchParams.get("tab") || DEFAULT_TAB;
+  const { scopedEnvironmentId } = parseEnvironmentId(environmentId);
+  const fullInstanceId = isOpen && projectId && scopedEnvironmentId && scopedComponentId ? composeInstanceId(projectId, scopedEnvironmentId, scopedComponentId) : null;
+  const { value, loading, error } = useInstanceApiQuery(PANEL_QUERY, fullInstanceId);
+  const instance = value?.instance;
+  const secretFields = (instance?.secretFields ?? []).filter(
+    Boolean
+  );
+  const tabs = secretFields.length ? [
+    ...BASE_TABS.slice(0, 3),
+    { id: "secrets", label: "Secrets" },
+    ...BASE_TABS.slice(3)
+  ] : BASE_TABS;
+  const tabExists = tabs.some((tab) => tab.id === activeTab);
+  const resolvedTab = tabExists ? activeTab : DEFAULT_TAB;
+  const handleClose = () => onClose();
+  const handleTabChange = (tabId) => {
+    setSearchParams((previous) => {
+      const next = new URLSearchParams(previous);
+      next.set("tab", tabId);
+      return next;
+    });
+  };
+  const appUrl = fullInstanceId && api.appUrl ? `${instanceUrl(
+    api.appUrl,
+    api.organizationId,
+    fullInstanceId
+  )}?tab=${resolvedTab}` : "";
+  const renderTab = () => {
+    switch (resolvedTab) {
+      case "config":
+        return /* @__PURE__ */ jsx(ConfigTab, { instanceId: fullInstanceId });
+      case "resources":
+        return /* @__PURE__ */ jsx(ResourcesTab, { instanceId: fullInstanceId });
+      case "dependencies":
+        return /* @__PURE__ */ jsx(DependenciesTab, { instanceId: fullInstanceId });
+      case "monitor":
+        return /* @__PURE__ */ jsx(MonitorTab, { instanceId: fullInstanceId });
+      case "history":
+        return /* @__PURE__ */ jsx(HistoryTab, { instanceId: fullInstanceId });
+      case "guide":
+        return /* @__PURE__ */ jsx(GuideTab, { instanceId: fullInstanceId });
+      case "secrets":
+        return /* @__PURE__ */ jsx(SecretsTab, { secretFields });
+      case "overview":
+      default:
+        return /* @__PURE__ */ jsx(OverviewTab, { instanceId: fullInstanceId });
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Panel, { ref: panelRef, style: { width }, children: [
+    /* @__PURE__ */ jsx(ResizeHandle, { onMouseDown: onResizeStart, "data-testid": "resize-handle" }),
+    /* @__PURE__ */ jsx(
+      InstanceDrawerHeader,
+      {
+        instance,
+        appUrl,
+        onClose: handleClose
+      }
+    ),
+    loading ? /* @__PURE__ */ jsx(Centered, { children: /* @__PURE__ */ jsx(LoadingIndicator, {}) }) : error ? /* @__PURE__ */ jsx(Padded, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) }) : !instance ? /* @__PURE__ */ jsx(
+      NotFound,
+      {
+        title: "Instance not found",
+        message: "This instance doesn't exist or you don't have access to it."
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        InstanceTabs,
+        {
+          tabs,
+          activeTab: resolvedTab,
+          onTabChange: handleTabChange
+        }
+      ),
+      /* @__PURE__ */ jsx(ContentArea, { role: "tabpanel", children: renderTab() })
+    ] })
+  ] });
+};
+const Panel = stylin(Box)(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  maxWidth: "100%",
+  zIndex: 10,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  backgroundColor: theme.palette.background.paper,
+  borderLeft: `1px solid ${theme.palette.divider}`,
+  boxShadow: theme.shadows[8]
+}));
+const ResizeHandle = stylin(Box)(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: theme.spacing(0.75),
+  cursor: "col-resize",
+  zIndex: 1,
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover
+  }
+}));
+const ContentArea = stylin(Box)(({ theme }) => ({
+  flex: 1,
+  overflow: "auto",
+  padding: theme.spacing(2)
+}));
+const Centered = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  padding: theme.spacing(6)
+}));
+const Padded = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(2)
+}));
+
+export { InstanceDrawer };
+//# sourceMappingURL=InstanceDrawer.esm.js.map

package/dist/features/environment/InstanceDrawer/InstanceDrawer.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstanceDrawer.esm.js","sources":["../../../../src/features/environment/InstanceDrawer/InstanceDrawer.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { useSearchParams } from 'react-router-dom';\nimport {\n  composeInstanceId,\n  instanceUrl,\n  parseEnvironmentId,\n} from '@massdriver/backstage-plugin-common';\nimport Box from '@massdriver/ui/Box';\nimport Alert from '@massdriver/ui/Alert';\nimport LoadingIndicator from '@massdriver/ui/LoadingIndicator';\nimport stylin from '@massdriver/ui/stylin';\nimport { massdriverApiRef } from '../../../api';\nimport { NotFound } from '../../../components/NotFound';\nimport { useInstanceApiQuery } from './useInstanceApiQuery';\nimport { useResizableWidth } from './useResizableWidth';\nimport { PANEL_QUERY } from './queries';\nimport { InstanceDrawerHeader } from './InstanceDrawerHeader';\nimport { InstanceTabs } from './InstanceTabs';\nimport ConfigTab from './tabs/ConfigTab';\nimport OverviewTab from './tabs/OverviewTab';\nimport ResourcesTab from './tabs/ResourcesTab';\nimport DependenciesTab from './tabs/DependenciesTab';\nimport MonitorTab from './tabs/MonitorTab';\nimport HistoryTab from './tabs/HistoryTab';\nimport GuideTab from './tabs/GuideTab';\nimport SecretsTab from './tabs/SecretsTab';\nimport type { PanelInstance, SecretField } from './types';\n\nconst DEFAULT_TAB = 'overview';\n\n// App tab order. Secrets is spliced in (after History) only when the instance\n// declares secret fields (see below).\nconst BASE_TABS = [\n  { id: 'overview', label: 'Overview' },\n  { id: 'config', label: 'Config' },\n  { id: 'history', label: 'History' },\n  { id: 'monitor', label: 'Monitor' },\n  { id: 'guide', label: 'Guide' },\n  { id: 'dependencies', label: 'Dependencies' },\n  { id: 'resources', label: 'Resources' },\n];\n\n/**\n * Read-only instance drawer rendered over the environment graph. Opens when the\n * `scopedComponentId` route param is present (the `.../instances/:scopedComponentId`\n * sub-route, mirroring the web app); closing navigates back to the environment\n * route. The active tab is carried in the `?tab=` query param.\n */\nexport const InstanceDrawer = ({\n  projectId,\n  environmentId,\n  scopedComponentId,\n  onClose,\n}: {\n  projectId: string;\n  environmentId: string;\n  scopedComponentId?: string;\n  onClose: () => void;\n}) => {\n  const api = useApi(massdriverApiRef);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const { width, panelRef, onResizeStart } = useResizableWidth();\n\n  const isOpen = Boolean(scopedComponentId);\n  const activeTab = searchParams.get('tab') || DEFAULT_TAB;\n\n  const { scopedEnvironmentId } = parseEnvironmentId(environmentId);\n  const fullInstanceId =\n    isOpen && projectId && scopedEnvironmentId && scopedComponentId\n      ? composeInstanceId(projectId, scopedEnvironmentId, scopedComponentId)\n      : null;\n\n  const { value, loading, error } = useInstanceApiQuery<{\n    instance: PanelInstance | null;\n  }>(PANEL_QUERY, fullInstanceId);\n  const instance = value?.instance;\n\n  const secretFields = (instance?.secretFields ?? []).filter(\n    Boolean,\n  ) as SecretField[];\n\n  const tabs = secretFields.length\n    ? [\n        ...BASE_TABS.slice(0, 3),\n        { id: 'secrets', label: 'Secrets' },\n        ...BASE_TABS.slice(3),\n      ]\n    : BASE_TABS;\n\n  const tabExists = tabs.some(tab => tab.id === activeTab);\n  const resolvedTab = tabExists ? activeTab : DEFAULT_TAB;\n\n  const handleClose = () => onClose();\n\n  const handleTabChange = (tabId: string) => {\n    setSearchParams(previous => {\n      const next = new URLSearchParams(previous);\n      next.set('tab', tabId);\n      return next;\n    });\n  };\n\n  const appUrl =\n    fullInstanceId && api.appUrl\n      ? `${instanceUrl(\n          api.appUrl,\n          api.organizationId,\n          fullInstanceId,\n        )}?tab=${resolvedTab}`\n      : '';\n\n  const renderTab = () => {\n    switch (resolvedTab) {\n      case 'config':\n        return <ConfigTab instanceId={fullInstanceId} />;\n      case 'resources':\n        return <ResourcesTab instanceId={fullInstanceId} />;\n      case 'dependencies':\n        return <DependenciesTab instanceId={fullInstanceId} />;\n      case 'monitor':\n        return <MonitorTab instanceId={fullInstanceId} />;\n      case 'history':\n        return <HistoryTab instanceId={fullInstanceId} />;\n      case 'guide':\n        return <GuideTab instanceId={fullInstanceId} />;\n      case 'secrets':\n        return <SecretsTab secretFields={secretFields} />;\n      case 'overview':\n      default:\n        return <OverviewTab instanceId={fullInstanceId} />;\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <Panel ref={panelRef} style={{ width }}>\n      <ResizeHandle onMouseDown={onResizeStart} data-testid=\"resize-handle\" />\n      <InstanceDrawerHeader\n        instance={instance}\n        appUrl={appUrl}\n        onClose={handleClose}\n      />\n      {loading ? (\n        <Centered>\n          <LoadingIndicator />\n        </Centered>\n      ) : error ? (\n        <Padded>\n          <Alert severity=\"error\">{String(error.message ?? error)}</Alert>\n        </Padded>\n      ) : !instance ? (\n        <NotFound\n          title=\"Instance not found\"\n          message=\"This instance doesn't exist or you don't have access to it.\"\n        />\n      ) : (\n        <>\n          <InstanceTabs\n            tabs={tabs}\n            activeTab={resolvedTab}\n            onTabChange={handleTabChange}\n          />\n          <ContentArea role=\"tabpanel\">{renderTab()}</ContentArea>\n        </>\n      )}\n    </Panel>\n  );\n};\n\nexport default InstanceDrawer;\n\n// Read-only panel pinned to the right edge of the environment graph. Uses a\n// plain absolutely-positioned Box rather than @massdriver/ui/Drawer: MUI v5's\n// Drawer relies on its Slide transition (and a Modal/portal for the temporary\n// variant), which does not paint reliably inside Backstage's hybrid runtime\n// (its own MUI v4 layer + the scoped `mdui` Emotion cache). Fixed width for now;\n// a drag-to-resize handle can be reintroduced later. GraphArea is `position:\n// relative`, so this anchors to it.\nconst Panel = stylin(Box)(({ theme }: { theme: any }) => ({\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  maxWidth: '100%',\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  backgroundColor: theme.palette.background.paper,\n  borderLeft: `1px solid ${theme.palette.divider}`,\n  boxShadow: theme.shadows[8],\n}));\n\nconst ResizeHandle = stylin(Box)(({ theme }: { theme: any }) => ({\n  position: 'absolute',\n  top: 0,\n  bottom: 0,\n  left: 0,\n  width: theme.spacing(0.75),\n  cursor: 'col-resize',\n  zIndex: 1,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n  },\n}));\n\nconst ContentArea = stylin(Box)(({ theme }: { theme: any }) => ({\n  flex: 1,\n  overflow: 'auto',\n  padding: theme.spacing(2),\n}));\n\nconst Centered = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  padding: theme.spacing(6),\n}));\n\nconst Padded = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(2),\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/InstanceDrawer/InstanceDrawerHeader.esm.js

@@ -0,0 +1,241 @@
+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 { CloseIconButton } from '@massdriver/ui/IconButton';
+import NotificationsIcon from '@massdriver/ui/icons/NotificationsIcon';
+import AttachMoneyIcon from '@massdriver/ui/icons/AttachMoneyIcon';
+import EditIcon from '@massdriver/ui/icons/EditIcon';
+import ArrowUpwardIcon from '@massdriver/ui/icons/ArrowUpwardIcon';
+import ArrowDownwardIcon from '@massdriver/ui/icons/ArrowDownwardIcon';
+import stylin from '@massdriver/ui/stylin';
+import VersionBadge from '../../../components/VersionBadge.esm.js';
+import InstanceStatusPill from '../components/InstanceStatusPill.esm.js';
+import { OpenInMassdriverButton } from '../../../components/OpenInMassdriverButton.esm.js';
+import { formatCurrency } from '../../../utils/formatRelativeTime.esm.js';
+import { formatRelativeTime } from './helpers.esm.js';
+
+const countActiveAlarms = (instance) => (instance?.alarms?.items ?? []).filter(
+  (alarm) => alarm?.currentState?.status === "ALARM"
+).length;
+const InstanceDrawerHeader = ({
+  instance,
+  appUrl,
+  onClose
+}) => {
+  const title = instance?.component?.name;
+  return /* @__PURE__ */ jsxs(HeaderRoot, { children: [
+    /* @__PURE__ */ jsxs(TopRow, { children: [
+      /* @__PURE__ */ jsxs(TitleArea, { children: [
+        title ? /* @__PURE__ */ jsx(Title, { variant: "h6", title, children: title }) : null,
+        instance?.version ? /* @__PURE__ */ jsx(VersionBadge, { version: instance.version, showPinnedWarning: true }) : null,
+        instance?.id ? /* @__PURE__ */ jsx(
+          InstanceStatusPill,
+          {
+            instance: { id: instance.id, status: instance.status }
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs(Actions, { children: [
+        appUrl ? /* @__PURE__ */ jsx(
+          OpenInMassdriverButton,
+          {
+            url: appUrl,
+            variant: "outlined",
+            size: "small"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(CloseIconButton, { onClick: onClose, tooltip: "Close panel" })
+      ] })
+    ] }),
+    instance ? /* @__PURE__ */ jsx(InstanceMeta, { instance }) : null
+  ] });
+};
+const InstanceMeta = ({ instance }) => {
+  const numAlerts = countActiveAlarms(instance);
+  const cost = instance.cost;
+  return /* @__PURE__ */ jsxs(MetaGrid, { children: [
+    /* @__PURE__ */ jsx(AlertsRow, { numAlerts }),
+    /* @__PURE__ */ jsx(
+      CostRow,
+      {
+        label: "yesterday",
+        sample: cost?.lastDay,
+        average: cost?.dailyAverage
+      }
+    ),
+    /* @__PURE__ */ jsx(EditedRow, { updatedAt: instance.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(MetaRow, { 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(MetaRow, { title: label, children: [
+    /* @__PURE__ */ jsx(StyledEditIcon, {}),
+    /* @__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(MetaRow, { title: `${label}: ${formatted}`, children: [
+    /* @__PURE__ */ jsx(MoneyIcon, { active: hasValue }),
+    /* @__PURE__ */ jsxs(RowText, { children: [
+      label,
+      ":\xA0",
+      hasValue ? /* @__PURE__ */ jsxs(CostInline, { children: [
+        /* @__PURE__ */ jsx(CostNumber, { children: formatted }),
+        averageAmount != null && amount !== averageAmount ? /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: formattedAverage ? `${formattedAverage} average` : "",
+            arrow: true,
+            placement: "right",
+            children: /* @__PURE__ */ jsx(TrendWrap, { children: amount > averageAmount ? /* @__PURE__ */ jsx(TrendUp, {}) : /* @__PURE__ */ jsx(TrendDown, {}) })
+          }
+        ) : null
+      ] }) : "---"
+    ] })
+  ] });
+};
+const HeaderRoot = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1.5, 2),
+  backgroundColor: theme.palette.background.paper,
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const TopRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1.5),
+  minHeight: 32,
+  minWidth: 0
+}));
+const TitleArea = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  flex: 1,
+  minWidth: 0
+}));
+const Title = stylin(Typography)(({ theme }) => ({
+  fontSize: "1.25rem",
+  fontWeight: 600,
+  lineHeight: 1.2,
+  color: theme.palette.text.primary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+}));
+const Actions = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  flexShrink: 0
+}));
+const MetaGrid = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  rowGap: theme.spacing(0.5),
+  columnGap: theme.spacing(2),
+  marginTop: theme.spacing(0.5),
+  minWidth: 0
+}));
+const MetaRow = stylin(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  minWidth: 0,
+  overflow: "hidden"
+});
+const RowText = stylin(Typography, ["hasAlerts"])(
+  ({ theme, hasAlerts }) => ({
+    fontSize: "14px",
+    fontWeight: 400,
+    color: hasAlerts ? theme.palette.error.main : theme.palette.text.secondary,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
+  })
+);
+const StyledEditIcon = 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: 16,
+  height: 16,
+  color: theme.palette.error.main
+}));
+const TrendDown = stylin(ArrowDownwardIcon)(({ theme }) => ({
+  width: 16,
+  height: 16,
+  color: theme.palette.success.main
+}));
+const CostInline = stylin("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "2px",
+  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 { InstanceDrawerHeader };
+//# sourceMappingURL=InstanceDrawerHeader.esm.js.map

package/dist/features/environment/InstanceDrawer/InstanceDrawerHeader.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstanceDrawerHeader.esm.js","sources":["../../../../src/features/environment/InstanceDrawer/InstanceDrawerHeader.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport { CloseIconButton } from '@massdriver/ui/IconButton';\nimport NotificationsIcon from '@massdriver/ui/icons/NotificationsIcon';\nimport AttachMoneyIcon from '@massdriver/ui/icons/AttachMoneyIcon';\nimport EditIcon from '@massdriver/ui/icons/EditIcon';\nimport ArrowUpwardIcon from '@massdriver/ui/icons/ArrowUpwardIcon';\nimport ArrowDownwardIcon from '@massdriver/ui/icons/ArrowDownwardIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport VersionBadge from '../../../components/VersionBadge';\nimport InstanceStatusPill from '../components/InstanceStatusPill';\nimport { OpenInMassdriverButton } from '../../../components/OpenInMassdriverButton';\nimport { formatCurrency } from '../../../utils/formatRelativeTime';\nimport { formatRelativeTime } from './helpers';\nimport type { Money, PanelInstance } from './types';\n\nconst countActiveAlarms = (instance?: PanelInstance | null): number =>\n  (instance?.alarms?.items ?? []).filter(\n    alarm => alarm?.currentState?.status === 'ALARM',\n  ).length;\n\nexport const InstanceDrawerHeader = ({\n  instance,\n  appUrl,\n  onClose,\n}: {\n  instance?: PanelInstance | null;\n  appUrl: string;\n  onClose: () => void;\n}) => {\n  const title = instance?.component?.name;\n\n  return (\n    <HeaderRoot>\n      <TopRow>\n        <TitleArea>\n          {title ? (\n            <Title variant=\"h6\" title={title}>\n              {title}\n            </Title>\n          ) : null}\n          {instance?.version ? (\n            <VersionBadge version={instance.version} showPinnedWarning />\n          ) : null}\n          {instance?.id ? (\n            <InstanceStatusPill\n              instance={{ id: instance.id, status: instance.status }}\n            />\n          ) : null}\n        </TitleArea>\n        <Actions>\n          {appUrl ? (\n            <OpenInMassdriverButton\n              url={appUrl}\n              variant=\"outlined\"\n              size=\"small\"\n            />\n          ) : null}\n          <CloseIconButton onClick={onClose} tooltip=\"Close panel\" />\n        </Actions>\n      </TopRow>\n      {instance ? <InstanceMeta instance={instance} /> : null}\n    </HeaderRoot>\n  );\n};\n\nexport default InstanceDrawerHeader;\n\nconst InstanceMeta = ({ instance }: { instance: PanelInstance }) => {\n  const numAlerts = countActiveAlarms(instance);\n  const cost = instance.cost;\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={instance.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  return (\n    <MetaRow title={label}>\n      <AlertsIcon hasAlerts={hasAlerts} />\n      <RowText hasAlerts={hasAlerts}>{label}</RowText>\n    </MetaRow>\n  );\n};\n\nconst EditedRow = ({ updatedAt }: { updatedAt?: string | null }) => {\n  const label = `last edited ${formatRelativeTime(updatedAt)}`;\n  return (\n    <MetaRow title={label}>\n      <StyledEditIcon />\n      <RowText>{label}</RowText>\n    </MetaRow>\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    <MetaRow title={`${label}: ${formatted}`}>\n      <MoneyIcon active={hasValue} />\n      <RowText>\n        {label}:&nbsp;\n        {hasValue ? (\n          <CostInline>\n            <CostNumber>{formatted}</CostNumber>\n            {averageAmount != null && amount !== averageAmount ? (\n              <Tooltip\n                title={formattedAverage ? `${formattedAverage} average` : ''}\n                arrow\n                placement=\"right\"\n              >\n                <TrendWrap>\n                  {(amount as number) > (averageAmount as number) ? (\n                    <TrendUp />\n                  ) : (\n                    <TrendDown />\n                  )}\n                </TrendWrap>\n              </Tooltip>\n            ) : null}\n          </CostInline>\n        ) : (\n          '---'\n        )}\n      </RowText>\n    </MetaRow>\n  );\n};\n\nconst HeaderRoot = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  padding: theme.spacing(1.5, 2),\n  backgroundColor: theme.palette.background.paper,\n  borderBottom: `1px solid ${theme.palette.divider}`,\n}));\n\nconst TopRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1.5),\n  minHeight: 32,\n  minWidth: 0,\n}));\n\nconst TitleArea = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flex: 1,\n  minWidth: 0,\n}));\n\nconst Title = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: '1.25rem',\n  fontWeight: 600,\n  lineHeight: 1.2,\n  color: theme.palette.text.primary,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  minWidth: 0,\n}));\n\nconst Actions = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n}));\n\nconst MetaGrid = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'grid',\n  gridTemplateColumns: '1fr 1fr',\n  rowGap: theme.spacing(0.5),\n  columnGap: theme.spacing(2),\n  marginTop: theme.spacing(0.5),\n  minWidth: 0,\n}));\n\nconst MetaRow = stylin(Box)({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '6px',\n  minWidth: 0,\n  overflow: 'hidden',\n});\n\nconst RowText = stylin(Typography, ['hasAlerts'])(\n  ({ theme, hasAlerts }: { theme: any; hasAlerts?: boolean }) => ({\n    fontSize: '14px',\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 StyledEditIcon = 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: 16,\n  height: 16,\n  color: theme.palette.error.main,\n}));\n\nconst TrendDown = stylin(ArrowDownwardIcon)(({ theme }: { theme: any }) => ({\n  width: 16,\n  height: 16,\n  color: theme.palette.success.main,\n}));\n\nconst CostInline = stylin('span')({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '2px',\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":"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"}