@massdriver/backstage-plugin 1.0.0

package/dist/features/project/tabs/EnvironmentsTab.esm.js

@@ -0,0 +1,199 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { parseEnvironmentId, projectUrl } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import DataList, { col } from '@massdriver/ui/DataList';
+import { HelpIconButton } from '@massdriver/ui/IconButton';
+import Stack from '@massdriver/ui/Stack';
+import Typography from '@massdriver/ui/Typography';
+import CheckIcon from '@massdriver/ui/icons/CheckIcon';
+import CloseIcon from '@massdriver/ui/icons/CloseIcon';
+import stylin from '@massdriver/ui/stylin';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { buildAttributesColumn, Code } from '../../../components/AttributesColumn.esm.js';
+import { ForkPill } from '../../../components/ForkPill.esm.js';
+import { OpenInMassdriverButton } from '../../../components/OpenInMassdriverButton.esm.js';
+import { RouterLinkAdapter } from '../../../components/RouterLinkAdapter.esm.js';
+import { usePaginatedRelayQuery } from '../../../hooks/usePaginatedRelayQuery.esm.js';
+import { internalRoutes } from '../../../internalRoutes.esm.js';
+
+const ENVIRONMENTS_QUERY = `
+  query MassdriverProjectEnvironments(
+    $organizationId: ID!
+    $sort: EnvironmentsSort
+    $cursor: Cursor
+    $filter: EnvironmentsFilter
+  ) {
+    environments(
+      organizationId: $organizationId
+      sort: $sort
+      cursor: $cursor
+      filter: $filter
+    ) {
+      items {
+        id
+        name
+        description
+        decommissionProtection
+        attributes
+        effectiveAttributes
+        createdAt
+        parent { id name createdAt }
+      }
+      cursor { next previous }
+    }
+  }
+`;
+const EnvironmentsTab = ({ projectId }) => {
+  const api = useApi(massdriverApiRef);
+  const { items, loading, error, hasMore, dataListParams } = usePaginatedRelayQuery(ENVIRONMENTS_QUERY, {
+    responseKey: "environments",
+    sortFieldMap: { name: "NAME", createdAt: "CREATED_AT" },
+    defaultSort: { field: "name", direction: "asc" },
+    pageSize: 20,
+    baseFilter: { projectId: { eq: projectId } }
+  });
+  const rows = items.map((env) => ({
+    ...env,
+    scopedEnvironmentId: parseEnvironmentId(env.id).scopedEnvironmentId
+  }));
+  const columns = [
+    col.custom(
+      "name",
+      "Name",
+      (value, row) => /* @__PURE__ */ jsxs(NameCell, { children: [
+        /* @__PURE__ */ jsx(
+          NameLink,
+          {
+            component: RouterLinkAdapter,
+            href: internalRoutes.environment(projectId, row.id),
+            children: value || "--"
+          }
+        ),
+        /* @__PURE__ */ jsx(ForkPill, { parent: row.parent, createdAt: row.createdAt })
+      ] }),
+      { flex: 2, minWidth: 180, sortable: true, searchable: true }
+    ),
+    col.text("scopedEnvironmentId", "Identifier", {
+      flex: 1,
+      minWidth: 120,
+      sortable: false
+    }),
+    col.text("description", "Description", {
+      flex: 3,
+      minWidth: 150,
+      sortable: false
+    }),
+    col.custom(
+      "decommissionProtection",
+      /* @__PURE__ */ jsx(ProtectedColumnHeader, {}),
+      (_value, row) => row.decommissionProtection ? /* @__PURE__ */ jsx(ProtectedYes, { "aria-label": "Protected", children: /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small" }) }) : /* @__PURE__ */ jsx(ProtectedNo, { "aria-label": "Not protected", children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }),
+      { flex: 1, minWidth: 120, sortable: false, searchable: false }
+    ),
+    buildAttributesColumn({
+      directText: "Key-value attributes assigned directly to this environment. Attributes cascade to instances within the environment.",
+      effectiveText: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "The full attribute map the authorization system evaluates policies against for this environment \u2014 the environment's own user attributes plus auto-injected ",
+        /* @__PURE__ */ jsx(Code, { children: "md-*" }),
+        " system attributes."
+      ] })
+    })
+  ];
+  const createUrl = `${projectUrl(
+    api.appUrl,
+    api.organizationId,
+    projectId
+  )}/environments?createEnvironment=true`;
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Environments" }),
+      /* @__PURE__ */ jsx(OpenInMassdriverButton, { url: createUrl, children: "Create Environment" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DataList,
+      {
+        rows,
+        columns,
+        loading,
+        serverSide: true,
+        hasMore,
+        emptyMessage: "This project doesn't have any environments yet.",
+        variant: "outlined",
+        ...dataListParams
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorNote, { children: String(error.message ?? error) })
+  ] });
+};
+const ProtectedColumnHeader = () => /* @__PURE__ */ jsxs(HeaderRow, { children: [
+  "Protected",
+  /* @__PURE__ */ jsx(
+    SmallHelpButton,
+    {
+      tooltip: /* @__PURE__ */ jsx(HelpText, { children: "When enabled, this environment cannot be decommissioned or deleted without first turning protection off in environment settings." }),
+      size: "small"
+    }
+  )
+] });
+const Wrapper = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  maxWidth: 1400,
+  mx: "auto",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const Header = stylin(Stack)({
+  justifyContent: "space-between",
+  alignItems: "center",
+  flexDirection: "row"
+});
+const NameCell = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  minWidth: 0
+}));
+const NameLink = stylin(Box)({
+  color: "inherit",
+  textDecoration: "none",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  minWidth: 0,
+  "&:hover": { textDecoration: "underline" }
+});
+const HeaderRow = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const SmallHelpButton = stylin(HelpIconButton)({
+  padding: "2px",
+  "& svg": { fontSize: 14 }
+});
+const HelpText = stylin("span")(({ theme }) => ({
+  display: "block",
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: 1.5,
+  maxWidth: 260,
+  color: "inherit"
+}));
+const ProtectedYes = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  color: theme.palette.success.main
+}));
+const ProtectedNo = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  color: theme.palette.text.disabled
+}));
+const ErrorNote = stylin("div")(({ theme }) => ({
+  color: theme.palette.error.main,
+  fontSize: theme.typography.body2.fontSize
+}));
+
+export { EnvironmentsTab };
+//# sourceMappingURL=EnvironmentsTab.esm.js.map

package/dist/features/project/tabs/EnvironmentsTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentsTab.esm.js","sources":["../../../../src/features/project/tabs/EnvironmentsTab.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport {\n  parseEnvironmentId,\n  projectUrl,\n} from '@massdriver/backstage-plugin-common';\nimport Box from '@massdriver/ui/Box';\nimport { col } from '@massdriver/ui/DataList';\nimport DataList from '@massdriver/ui/DataList';\nimport { HelpIconButton } from '@massdriver/ui/IconButton';\nimport Stack from '@massdriver/ui/Stack';\nimport Typography from '@massdriver/ui/Typography';\nimport CheckIcon from '@massdriver/ui/icons/CheckIcon';\nimport CloseIcon from '@massdriver/ui/icons/CloseIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport { massdriverApiRef } from '../../../api';\nimport {\n  buildAttributesColumn,\n  Code,\n} from '../../../components/AttributesColumn';\nimport { ForkPill } from '../../../components/ForkPill';\nimport { OpenInMassdriverButton } from '../../../components/OpenInMassdriverButton';\nimport { RouterLinkAdapter } from '../../../components/RouterLinkAdapter';\nimport { usePaginatedRelayQuery } from '../../../hooks/usePaginatedRelayQuery';\nimport { internalRoutes } from '../../../internalRoutes';\n\ninterface EnvRow {\n  id: string;\n  name: string;\n  description?: string | null;\n  decommissionProtection?: boolean;\n  attributes?: unknown;\n  effectiveAttributes?: unknown;\n  createdAt?: string | null;\n  parent?: { id: string; name?: string; createdAt?: string } | null;\n  scopedEnvironmentId?: string;\n}\n\nconst ENVIRONMENTS_QUERY = `\n  query MassdriverProjectEnvironments(\n    $organizationId: ID!\n    $sort: EnvironmentsSort\n    $cursor: Cursor\n    $filter: EnvironmentsFilter\n  ) {\n    environments(\n      organizationId: $organizationId\n      sort: $sort\n      cursor: $cursor\n      filter: $filter\n    ) {\n      items {\n        id\n        name\n        description\n        decommissionProtection\n        attributes\n        effectiveAttributes\n        createdAt\n        parent { id name createdAt }\n      }\n      cursor { next previous }\n    }\n  }\n`;\n\n/** Read-only Environments tab: server-paginated list scoped to the project. */\nexport const EnvironmentsTab = ({ projectId }: { projectId: string }) => {\n  const api = useApi(massdriverApiRef);\n  const { items, loading, error, hasMore, dataListParams } =\n    usePaginatedRelayQuery<EnvRow>(ENVIRONMENTS_QUERY, {\n      responseKey: 'environments',\n      sortFieldMap: { name: 'NAME', createdAt: 'CREATED_AT' },\n      defaultSort: { field: 'name', direction: 'asc' },\n      pageSize: 20,\n      baseFilter: { projectId: { eq: projectId } },\n    });\n\n  const rows: EnvRow[] = items.map(env => ({\n    ...env,\n    scopedEnvironmentId: parseEnvironmentId(env.id).scopedEnvironmentId,\n  }));\n\n  const columns = [\n    col.custom(\n      'name',\n      'Name',\n      (value: string, row: EnvRow) => (\n        <NameCell>\n          <NameLink\n            component={RouterLinkAdapter}\n            href={internalRoutes.environment(projectId, row.id)}\n          >\n            {value || '--'}\n          </NameLink>\n          <ForkPill parent={row.parent} createdAt={row.createdAt} />\n        </NameCell>\n      ),\n      { flex: 2, minWidth: 180, sortable: true, searchable: true },\n    ),\n    col.text('scopedEnvironmentId', 'Identifier', {\n      flex: 1,\n      minWidth: 120,\n      sortable: false,\n    }),\n    col.text('description', 'Description', {\n      flex: 3,\n      minWidth: 150,\n      sortable: false,\n    }),\n    col.custom(\n      'decommissionProtection',\n      <ProtectedColumnHeader />,\n      (_value: unknown, row: EnvRow) =>\n        row.decommissionProtection ? (\n          <ProtectedYes aria-label=\"Protected\">\n            <CheckIcon fontSize=\"small\" />\n          </ProtectedYes>\n        ) : (\n          <ProtectedNo aria-label=\"Not protected\">\n            <CloseIcon fontSize=\"small\" />\n          </ProtectedNo>\n        ),\n      { flex: 1, minWidth: 120, sortable: false, searchable: false },\n    ),\n    buildAttributesColumn({\n      directText:\n        'Key-value attributes assigned directly to this environment. Attributes cascade to instances within the environment.',\n      effectiveText: (\n        <>\n          The full attribute map the authorization system evaluates policies\n          against for this environment — the environment's own user attributes\n          plus auto-injected <Code>md-*</Code> system attributes.\n        </>\n      ),\n    }),\n  ];\n\n  const createUrl = `${projectUrl(\n    api.appUrl,\n    api.organizationId,\n    projectId,\n  )}/environments?createEnvironment=true`;\n\n  return (\n    <Wrapper>\n      <Header>\n        <Typography variant=\"h6\">Environments</Typography>\n        <OpenInMassdriverButton url={createUrl}>\n          Create Environment\n        </OpenInMassdriverButton>\n      </Header>\n      <DataList\n        rows={rows}\n        columns={columns}\n        loading={loading}\n        serverSide\n        hasMore={hasMore}\n        emptyMessage=\"This project doesn't have any environments yet.\"\n        variant=\"outlined\"\n        {...dataListParams}\n      />\n      {error && <ErrorNote>{String(error.message ?? error)}</ErrorNote>}\n    </Wrapper>\n  );\n};\n\nconst ProtectedColumnHeader = () => (\n  <HeaderRow>\n    Protected\n    <SmallHelpButton\n      tooltip={\n        <HelpText>\n          When enabled, this environment cannot be decommissioned or deleted\n          without first turning protection off in environment settings.\n        </HelpText>\n      }\n      size=\"small\"\n    />\n  </HeaderRow>\n);\n\nconst Wrapper = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(4),\n  maxWidth: 1400,\n  mx: 'auto',\n  width: '100%',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n}));\n\nconst Header = stylin(Stack)({\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  flexDirection: 'row',\n});\n\nconst NameCell = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  minWidth: 0,\n}));\n\nconst NameLink = stylin(Box)({\n  color: 'inherit',\n  textDecoration: 'none',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n  '&:hover': { textDecoration: 'underline' },\n});\n\nconst HeaderRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n}));\n\nconst SmallHelpButton = stylin(HelpIconButton)({\n  padding: '2px',\n  '& svg': { fontSize: 14 },\n});\n\nconst HelpText = stylin('span')(({ theme }: { theme: any }) => ({\n  display: 'block',\n  fontSize: theme.typography.pxToRem(12),\n  lineHeight: 1.5,\n  maxWidth: 260,\n  color: 'inherit',\n}));\n\nconst ProtectedYes = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: theme.palette.success.main,\n}));\n\nconst ProtectedNo = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: theme.palette.text.disabled,\n}));\n\nconst ErrorNote = stylin('div')(({ theme }: { theme: any }) => ({\n  color: theme.palette.error.main,\n  fontSize: theme.typography.body2.fontSize,\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/project/tabs/OverviewTab.esm.js

@@ -0,0 +1,420 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { parseEnvironmentId } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import Card from '@massdriver/ui/Card';
+import Divider from '@massdriver/ui/Divider';
+import LoadingIndicator from '@massdriver/ui/LoadingIndicator';
+import Alert from '@massdriver/ui/Alert';
+import Typography from '@massdriver/ui/Typography';
+import ChevronRightIcon from '@massdriver/ui/icons/ChevronRightIcon';
+import stylin from '@massdriver/ui/stylin';
+import useAsync from 'react-use/esm/useAsync';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { RouterLinkAdapter } from '../../../components/RouterLinkAdapter.esm.js';
+import { internalRoutes } from '../../../internalRoutes.esm.js';
+import { formatRelativeTime, formatCurrency } from '../../../utils/formatRelativeTime.esm.js';
+
+const MONEY = `{ amount currency }`;
+const COST = `cost { lastDay ${MONEY} dailyAverage ${MONEY} lastMonth ${MONEY} monthlyAverage ${MONEY} }`;
+const OVERVIEW_QUERY = `
+  query MassdriverProjectOverview($organizationId: ID!, $id: ID!) {
+    project(organizationId: $organizationId, id: $id) {
+      id
+      name
+      description
+      createdAt
+      updatedAt
+      ${COST}
+      environments(cursor: { limit: 100 }) {
+        items { id name description updatedAt ${COST} }
+      }
+    }
+  }
+`;
+const useProjectOverview = (projectId) => {
+  const api = useApi(massdriverApiRef);
+  return useAsync(async () => {
+    const data = await api.query(OVERVIEW_QUERY, { id: projectId });
+    return data.project;
+  }, [api, projectId]);
+};
+const OverviewTab = ({ projectId }) => {
+  const { value: project, loading, error } = useProjectOverview(projectId);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Centered, { children: /* @__PURE__ */ jsx(LoadingIndicator, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) });
+  }
+  const environments = (project?.environments?.items ?? []).filter(
+    Boolean
+  );
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsxs(TopRow, { children: [
+      /* @__PURE__ */ jsx(MetadataCard, { project }),
+      /* @__PURE__ */ jsx(CostSummaryCard, { cost: project?.cost })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EnvironmentSummaryCards,
+      {
+        environments,
+        projectId
+      }
+    )
+  ] });
+};
+const MetadataCard = ({ project }) => /* @__PURE__ */ jsxs(MetaWrapper, { children: [
+  /* @__PURE__ */ jsx(SectionTitle, { variant: "overline", children: "Details" }),
+  /* @__PURE__ */ jsxs(FieldList, { children: [
+    /* @__PURE__ */ jsx(Field, { label: "Identifier", value: project?.id, mono: true }),
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: "Created",
+        value: project?.createdAt ? formatRelativeTime(project.createdAt) : "\u2014"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: "Last updated",
+        value: project?.updatedAt ? formatRelativeTime(project.updatedAt) : "\u2014"
+      }
+    )
+  ] })
+] });
+const Field = ({
+  label,
+  value,
+  mono
+}) => /* @__PURE__ */ jsxs(FieldRow, { children: [
+  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: label }),
+  /* @__PURE__ */ jsx(FieldValue, { variant: "body2", mono, title: value ?? "", children: value })
+] });
+const CostSummaryCard = ({ cost }) => /* @__PURE__ */ jsxs(CostWrapper, { children: [
+  /* @__PURE__ */ jsx(SectionTitle, { variant: "overline", children: "Cost" }),
+  /* @__PURE__ */ jsxs(CostRow, { children: [
+    /* @__PURE__ */ jsx(
+      CostBlock,
+      {
+        label: "Last 24 hours",
+        amount: cost?.lastDay?.amount,
+        currency: cost?.lastDay?.currency,
+        avg: cost?.dailyAverage?.amount,
+        avgLabel: "7-day avg"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CostBlock,
+      {
+        label: "Last month",
+        amount: cost?.lastMonth?.amount,
+        currency: cost?.lastMonth?.currency,
+        avg: cost?.monthlyAverage?.amount,
+        avgLabel: "Monthly avg"
+      }
+    )
+  ] })
+] });
+const CostBlock = ({
+  label,
+  amount,
+  currency,
+  avg,
+  avgLabel
+}) => /* @__PURE__ */ jsxs(CostBlockRoot, { children: [
+  /* @__PURE__ */ jsx(CostLabel, { variant: "caption", children: label }),
+  /* @__PURE__ */ jsx(CostAmount, { variant: "h4", children: formatCurrency(amount, currency ?? "USD", "No data yet") }),
+  /* @__PURE__ */ jsxs(CostAvg, { variant: "caption", children: [
+    avgLabel,
+    ": ",
+    formatCurrency(avg, currency ?? "USD", "No data yet")
+  ] })
+] });
+const EnvironmentSummaryCards = ({
+  environments,
+  projectId
+}) => /* @__PURE__ */ jsxs(EnvWrapper, { children: [
+  /* @__PURE__ */ jsx(SectionTitle, { variant: "overline", children: "Environments" }),
+  environments.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No environments yet. Create your first environment to start deploying." }) }) : /* @__PURE__ */ jsx(List, { children: environments.map((env, index) => /* @__PURE__ */ jsx(
+    EnvironmentRow,
+    {
+      environment: env,
+      href: internalRoutes.environment(projectId, env.id),
+      isFirst: index === 0
+    },
+    env.id
+  )) })
+] });
+const EnvironmentRow = ({
+  environment,
+  href,
+  isFirst
+}) => {
+  const { scopedEnvironmentId } = parseEnvironmentId(environment.id);
+  const currency = environment.cost?.lastMonth?.currency ?? environment.cost?.monthlyAverage?.currency ?? environment.cost?.lastDay?.currency ?? environment.cost?.dailyAverage?.currency ?? "USD";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isFirst && /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(RowLink, { component: RouterLinkAdapter, href, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsxs(PrimaryColumn, { children: [
+        /* @__PURE__ */ jsxs(NameRow, { children: [
+          /* @__PURE__ */ jsx(Name, { variant: "subtitle1", children: environment.name }),
+          /* @__PURE__ */ jsx(IdBadge, { children: scopedEnvironmentId })
+        ] }),
+        environment.description ? /* @__PURE__ */ jsx(Description, { variant: "body2", children: environment.description }) : /* @__PURE__ */ jsx(DescriptionMuted, { variant: "body2", children: "No description" })
+      ] }),
+      /* @__PURE__ */ jsxs(Stats, { children: [
+        /* @__PURE__ */ jsxs(Stat, { children: [
+          /* @__PURE__ */ jsx(StatLabel, { variant: "caption", children: "Last 24 hours" }),
+          /* @__PURE__ */ jsx(StatPrimary, { variant: "body1", children: formatCurrency(
+            environment.cost?.lastDay?.amount,
+            currency,
+            "\u2014"
+          ) }),
+          /* @__PURE__ */ jsxs(StatSecondary, { variant: "caption", children: [
+            "7-day avg",
+            " ",
+            formatCurrency(
+              environment.cost?.dailyAverage?.amount,
+              currency,
+              "\u2014"
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Stat, { children: [
+          /* @__PURE__ */ jsx(StatLabel, { variant: "caption", children: "Last month" }),
+          /* @__PURE__ */ jsx(StatPrimary, { variant: "body1", children: formatCurrency(
+            environment.cost?.lastMonth?.amount,
+            currency,
+            "\u2014"
+          ) }),
+          /* @__PURE__ */ jsxs(StatSecondary, { variant: "caption", children: [
+            "Monthly avg",
+            " ",
+            formatCurrency(
+              environment.cost?.monthlyAverage?.amount,
+              currency,
+              "\u2014"
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Trailing, { children: [
+        environment.updatedAt ? /* @__PURE__ */ jsxs(Updated, { variant: "caption", children: [
+          "Updated ",
+          formatRelativeTime(environment.updatedAt)
+        ] }) : null,
+        /* @__PURE__ */ jsx(Chevron, {})
+      ] })
+    ] }) })
+  ] });
+};
+const Wrapper = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  maxWidth: 1400,
+  mx: "auto",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(4)
+}));
+const Centered = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  padding: theme.spacing(6)
+}));
+const TopRow = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "minmax(280px, 1fr) minmax(360px, 1.6fr)",
+  gap: theme.spacing(2),
+  [theme.breakpoints.down("md")]: { gridTemplateColumns: "1fr" }
+}));
+const SectionTitle = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  letterSpacing: theme.spacing(0.1)
+}));
+const MetaWrapper = stylin(Card)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1.5),
+  padding: theme.spacing(3)
+}));
+const FieldList = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1.25)
+}));
+const FieldRow = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(14)} 1fr`,
+  alignItems: "baseline",
+  gap: theme.spacing(2),
+  minWidth: 0
+}));
+const FieldValue = stylin(Typography, ["mono"])(
+  ({ theme, mono }) => ({
+    color: theme.palette.text.primary,
+    fontFamily: mono ? theme.typography.fontFamilyMono : theme.typography.body2.fontFamily,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
+  })
+);
+const CostWrapper = stylin(Card)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  padding: theme.spacing(3)
+}));
+const CostRow = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(2, 1fr)",
+  gap: theme.spacing(3)
+}));
+const CostBlockRoot = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  paddingLeft: theme.spacing(1.5),
+  borderLeft: `2px solid ${theme.palette.divider}`
+}));
+const CostLabel = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  fontWeight: 600,
+  fontSize: "0.7rem"
+}));
+const CostAmount = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: theme.typography.fontWeightBold,
+  lineHeight: 1.1
+}));
+const CostAvg = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const EnvWrapper = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1.5)
+}));
+const List = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 1,
+  backgroundColor: theme.palette.background.paper,
+  overflow: "hidden"
+}));
+const RowLink = stylin(Box)(({ theme }) => ({
+  display: "block",
+  padding: theme.spacing(2.5, 3),
+  textDecoration: "none",
+  color: "inherit",
+  transition: "background-color 120ms ease",
+  "&:hover": { backgroundColor: `${theme.palette.primary.main}14` }
+}));
+const Row = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "minmax(0, 2fr) minmax(0, 3fr) auto",
+  gap: theme.spacing(4),
+  alignItems: "center",
+  [theme.breakpoints.down("md")]: {
+    gridTemplateColumns: "1fr",
+    gap: theme.spacing(2)
+  }
+}));
+const PrimaryColumn = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  minWidth: 0
+}));
+const NameRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  minWidth: 0
+}));
+const Name = stylin(Typography)(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.palette.text.primary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const IdBadge = stylin(Box)(({ theme }) => ({
+  fontFamily: theme.typography.fontFamilyMono,
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.text.secondary,
+  backgroundColor: theme.palette.action.hover,
+  padding: theme.spacing(0.25, 0.75),
+  borderRadius: theme.custom.general.borderRadiusSm,
+  whiteSpace: "nowrap",
+  flexShrink: 0
+}));
+const Description = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const DescriptionMuted = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontStyle: "italic"
+}));
+const Stats = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(4),
+  [theme.breakpoints.down("md")]: { gap: theme.spacing(3) }
+}));
+const Stat = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.25),
+  minWidth: theme.spacing(14)
+}));
+const StatLabel = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  fontWeight: 600,
+  fontSize: "0.65rem"
+}));
+const StatPrimary = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: theme.typography.fontWeightBold,
+  fontVariantNumeric: "tabular-nums"
+}));
+const StatSecondary = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontVariantNumeric: "tabular-nums"
+}));
+const Trailing = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  flexShrink: 0
+}));
+const Updated = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap"
+}));
+const Chevron = stylin(ChevronRightIcon)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontSize: 20
+}));
+const EmptyState = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  border: `1px dashed ${theme.palette.divider}`,
+  borderRadius: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center"
+}));
+
+export { OverviewTab };
+//# sourceMappingURL=OverviewTab.esm.js.map