@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/realtime/useLiveRelayQuery.esm.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { useRealtimeRevision } from './RealtimeProvider.esm.js';
+
+const useLiveRelayQuery = (query, variables) => {
+  const api = useApi(massdriverApiRef);
+  const revision = useRealtimeRevision();
+  const [state, setState] = useState({ identity: "" });
+  const skip = variables === null;
+  const identity = `${query}|${JSON.stringify(variables)}`;
+  useEffect(() => {
+    if (skip) return void 0;
+    let cancelled = false;
+    api.query(query, variables).then(
+      (value) => {
+        if (!cancelled) setState({ identity, value });
+      },
+      (error) => {
+        if (!cancelled) setState({ identity, error });
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [api, query, identity, revision, skip]);
+  const fresh = state.identity === identity;
+  return {
+    value: !skip && fresh ? state.value : void 0,
+    error: !skip && fresh ? state.error : void 0,
+    loading: !skip && !fresh
+  };
+};
+
+export { useLiveRelayQuery };
+//# sourceMappingURL=useLiveRelayQuery.esm.js.map

package/dist/features/environment/realtime/useLiveRelayQuery.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveRelayQuery.esm.js","sources":["../../../../src/features/environment/realtime/useLiveRelayQuery.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useApi } from '@backstage/frontend-plugin-api';\nimport { massdriverApiRef } from '../../../api';\nimport { useRealtimeRevision } from './RealtimeProvider';\n\ninterface LiveQueryState<T> {\n  identity: string;\n  value?: T;\n  error?: Error;\n}\n\n/**\n * Relay query that stays live via the environment's realtime revision, with two\n * distinct refetch behaviors:\n *\n * - **Identity change** (query/variables): the previous result is dropped and\n *   `loading` goes true — a different entity is being loaded, show a loader.\n * - **Revision bump** (realtime event): the previous result stays rendered and\n *   swaps atomically when fresh data lands — never a loading flash. This is the\n *   plugin's analogue of the web app's \"no skeleton flicker on subscription\n *   refetch\" rule (see .claude/rules/realtime.md).\n *\n * Pass `variables: null` to skip (returns `{ loading: false }` with no value).\n */\nexport const useLiveRelayQuery = <T>(\n  query: string,\n  variables: Record<string, unknown> | null,\n): { value?: T; error?: Error; loading: boolean } => {\n  const api = useApi(massdriverApiRef);\n  const revision = useRealtimeRevision();\n  const [state, setState] = useState<LiveQueryState<T>>({ identity: '' });\n\n  const skip = variables === null;\n  const identity = `${query}|${JSON.stringify(variables)}`;\n\n  useEffect(() => {\n    if (skip) return undefined;\n    let cancelled = false;\n    api.query(query, variables).then(\n      value => {\n        if (!cancelled) setState({ identity, value: value as T });\n      },\n      error => {\n        if (!cancelled) setState({ identity, error: error as Error });\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n    // `variables` participates by value through `identity`.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [api, query, identity, revision, skip]);\n\n  // A result only counts once it matches the current identity; until then the\n  // hook is loading and stale state is hidden. Revision bumps keep the identity\n  // (and therefore the rendered value) intact while the refetch is in flight.\n  const fresh = state.identity === identity;\n  return {\n    value: !skip && fresh ? state.value : undefined,\n    error: !skip && fresh ? state.error : undefined,\n    loading: !skip && !fresh,\n  };\n};\n\nexport default useLiveRelayQuery;\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,iBAAA,GAAoB,CAC/B,KAAA,EACA,SAAA,KACmD;AACnD,EAAA,MAAM,GAAA,GAAM,OAAO,gBAAgB,CAAA;AACnC,EAAA,MAAM,WAAW,mBAAA,EAAoB;AACrC,EAAA,MAAM,CAAC,OAAO,QAAQ,CAAA,GAAI,SAA4B,EAAE,QAAA,EAAU,IAAI,CAAA;AAEtE,EAAA,MAAM,OAAO,SAAA,KAAc,IAAA;AAC3B,EAAA,MAAM,WAAW,CAAA,EAAG,KAAK,IAAI,IAAA,CAAK,SAAA,CAAU,SAAS,CAAC,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,OAAO,MAAA;AACjB,IAAA,IAAI,SAAA,GAAY,KAAA;AAChB,IAAA,GAAA,CAAI,KAAA,CAAM,KAAA,EAAO,SAAS,CAAA,CAAE,IAAA;AAAA,MAC1B,CAAA,KAAA,KAAS;AACP,QAAA,IAAI,CAAC,SAAA,EAAW,QAAA,CAAS,EAAE,QAAA,EAAU,OAAmB,CAAA;AAAA,MAC1D,CAAA;AAAA,MACA,CAAA,KAAA,KAAS;AACP,QAAA,IAAI,CAAC,SAAA,EAAW,QAAA,CAAS,EAAE,QAAA,EAAU,OAAuB,CAAA;AAAA,MAC9D;AAAA,KACF;AACA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EAGF,GAAG,CAAC,GAAA,EAAK,OAAO,QAAA,EAAU,QAAA,EAAU,IAAI,CAAC,CAAA;AAKzC,EAAA,MAAM,KAAA,GAAQ,MAAM,QAAA,KAAa,QAAA;AACjC,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,CAAC,IAAA,IAAQ,KAAA,GAAQ,MAAM,KAAA,GAAQ,MAAA;AAAA,IACtC,KAAA,EAAO,CAAC,IAAA,IAAQ,KAAA,GAAQ,MAAM,KAAA,GAAQ,MAAA;AAAA,IACtC,OAAA,EAAS,CAAC,IAAA,IAAQ,CAAC;AAAA,GACrB;AACF;;;;"}

package/dist/features/project/ProjectDetailsPage.esm.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { projectUrl } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import PageTabs from '@massdriver/ui/PageTabs';
+import stylin from '@massdriver/ui/stylin';
+import useAsync from 'react-use/esm/useAsync';
+import { useParams } from 'react-router-dom';
+import { massdriverApiRef } from '../../api.esm.js';
+import { NotFound } from '../../components/NotFound.esm.js';
+import { OpenInMassdriverButton } from '../../components/OpenInMassdriverButton.esm.js';
+import { PageLayout } from '../../components/PageLayout.esm.js';
+import { RouterLinkAdapter } from '../../components/RouterLinkAdapter.esm.js';
+import { internalRoutes } from '../../internalRoutes.esm.js';
+import { ComponentsTab } from './tabs/ComponentsTab.esm.js';
+import { EnvironmentsTab } from './tabs/EnvironmentsTab.esm.js';
+import { OverviewTab } from './tabs/OverviewTab.esm.js';
+
+const TABS = [
+  { id: "overview", label: "Overview" },
+  { id: "components", label: "Components" },
+  { id: "environments", label: "Environments" }
+];
+const PANELS = {
+  overview: OverviewTab,
+  components: ComponentsTab,
+  environments: EnvironmentsTab
+};
+const HEADER_QUERY = `
+  query MassdriverProjectHeader($organizationId: ID!, $id: ID!) {
+    project(organizationId: $organizationId, id: $id) {
+      id
+      name
+      description
+    }
+  }
+`;
+const ProjectDetailsPage = () => {
+  const api = useApi(massdriverApiRef);
+  const { projectId = "", tab } = useParams();
+  const activeTab = TABS.some((entry) => entry.id === tab) ? tab : "overview";
+  const {
+    value: project,
+    loading,
+    error
+  } = useAsync(async () => {
+    const data = await api.query(HEADER_QUERY, { id: projectId });
+    return data.project;
+  }, [api, projectId]);
+  if (!loading && !error && !project) {
+    return /* @__PURE__ */ jsx(
+      NotFound,
+      {
+        title: "Project not found",
+        message: "This project doesn't exist or you don't have access to it."
+      }
+    );
+  }
+  const tabs = TABS.map((entry) => ({
+    ...entry,
+    href: internalRoutes.projectTab(projectId, entry.id)
+  }));
+  const appProjectUrl = projectUrl(api.appUrl, api.organizationId, projectId);
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      title: project?.name ?? "",
+      description: project?.description,
+      headerActions: /* @__PURE__ */ jsxs(HeaderActions, { children: [
+        /* @__PURE__ */ jsx(OpenInMassdriverButton, { url: appProjectUrl, variant: "outlined", children: "Open in Massdriver" }),
+        /* @__PURE__ */ jsx(
+          OpenInMassdriverButton,
+          {
+            url: `${appProjectUrl}?cloneProject=true`,
+            variant: "outlined",
+            children: "Clone Project"
+          }
+        )
+      ] }),
+      flush: true,
+      children: /* @__PURE__ */ jsx(
+        PageTabs,
+        {
+          orientation: "vertical",
+          tabs,
+          panels: PANELS,
+          activeTab,
+          panelProps: { projectId },
+          LinkComponent: RouterLinkAdapter
+        }
+      )
+    }
+  );
+};
+const HeaderActions = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1.5)
+}));
+
+export { ProjectDetailsPage };
+//# sourceMappingURL=ProjectDetailsPage.esm.js.map

package/dist/features/project/ProjectDetailsPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectDetailsPage.esm.js","sources":["../../../src/features/project/ProjectDetailsPage.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { projectUrl } from '@massdriver/backstage-plugin-common';\nimport Box from '@massdriver/ui/Box';\nimport PageTabs from '@massdriver/ui/PageTabs';\nimport stylin from '@massdriver/ui/stylin';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useParams } from 'react-router-dom';\nimport { massdriverApiRef } from '../../api';\nimport { NotFound } from '../../components/NotFound';\nimport { OpenInMassdriverButton } from '../../components/OpenInMassdriverButton';\nimport { PageLayout } from '../../components/PageLayout';\nimport { RouterLinkAdapter } from '../../components/RouterLinkAdapter';\nimport { internalRoutes } from '../../internalRoutes';\nimport { ComponentsTab } from './tabs/ComponentsTab';\nimport { EnvironmentsTab } from './tabs/EnvironmentsTab';\nimport { OverviewTab } from './tabs/OverviewTab';\n\nconst TABS = [\n  { id: 'overview', label: 'Overview' },\n  { id: 'components', label: 'Components' },\n  { id: 'environments', label: 'Environments' },\n];\n\nconst PANELS: Record<string, (props: { projectId: string }) => JSX.Element> = {\n  overview: OverviewTab,\n  components: ComponentsTab,\n  environments: EnvironmentsTab,\n};\n\nconst HEADER_QUERY = `\n  query MassdriverProjectHeader($organizationId: ID!, $id: ID!) {\n    project(organizationId: $organizationId, id: $id) {\n      id\n      name\n      description\n    }\n  }\n`;\n\n/** Read-only project details: vertical side-tabs mirroring the web app. */\nexport const ProjectDetailsPage = () => {\n  const api = useApi(massdriverApiRef);\n  const { projectId = '', tab } = useParams();\n  const activeTab = TABS.some(entry => entry.id === tab) ? tab! : 'overview';\n\n  const {\n    value: project,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const data = (await api.query(HEADER_QUERY, { id: projectId })) as {\n      project: { id: string; name?: string; description?: string } | null;\n    };\n    return data.project;\n  }, [api, projectId]);\n\n  if (!loading && !error && !project) {\n    return (\n      <NotFound\n        title=\"Project not found\"\n        message=\"This project doesn't exist or you don't have access to it.\"\n      />\n    );\n  }\n\n  const tabs = TABS.map(entry => ({\n    ...entry,\n    href: internalRoutes.projectTab(projectId, entry.id),\n  }));\n\n  const appProjectUrl = projectUrl(api.appUrl, api.organizationId, projectId);\n\n  return (\n    <PageLayout\n      title={project?.name ?? ''}\n      description={project?.description}\n      headerActions={\n        <HeaderActions>\n          <OpenInMassdriverButton url={appProjectUrl} variant=\"outlined\">\n            Open in Massdriver\n          </OpenInMassdriverButton>\n          <OpenInMassdriverButton\n            url={`${appProjectUrl}?cloneProject=true`}\n            variant=\"outlined\"\n          >\n            Clone Project\n          </OpenInMassdriverButton>\n        </HeaderActions>\n      }\n      flush\n    >\n      <PageTabs\n        orientation=\"vertical\"\n        tabs={tabs}\n        panels={PANELS}\n        activeTab={activeTab}\n        panelProps={{ projectId }}\n        LinkComponent={RouterLinkAdapter}\n      />\n    </PageLayout>\n  );\n};\n\nconst HeaderActions = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.5),\n}));\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,149 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { parseInstanceId } from '@massdriver/backstage-plugin-common';
+import Alert from '@massdriver/ui/Alert';
+import Box from '@massdriver/ui/Box';
+import DataList, { col } from '@massdriver/ui/DataList';
+import IconTile from '@massdriver/ui/IconTile';
+import Stack from '@massdriver/ui/Stack';
+import Typography from '@massdriver/ui/Typography';
+import ExtensionIcon from '@massdriver/ui/icons/ExtensionIcon';
+import stylin from '@massdriver/ui/stylin';
+import useAsync from 'react-use/esm/useAsync';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { buildAttributesColumn, Code } from '../../../components/AttributesColumn.esm.js';
+import { internalRoutes } from '../../../internalRoutes.esm.js';
+import { EnvStatusStrip } from './EnvStatus.esm.js';
+
+const COMPONENTS_QUERY = `
+  query MassdriverProjectComponents($organizationId: ID!, $id: ID!) {
+    project(organizationId: $organizationId, id: $id) {
+      id
+      components {
+        id
+        name
+        description
+        attributes
+        effectiveAttributes
+        ociRepo { id name icon }
+        instances(cursor: { limit: 100 }) {
+          items {
+            id
+            status
+            deployedVersion
+            resolvedVersion
+            availableUpgrade
+            environment { id name }
+          }
+        }
+      }
+    }
+  }
+`;
+const ComponentsTab = ({ projectId }) => {
+  const api = useApi(massdriverApiRef);
+  const { value, loading, error } = useAsync(async () => {
+    const data = await api.query(COMPONENTS_QUERY, { id: projectId });
+    return data.project?.components ?? [];
+  }, [api, projectId]);
+  const rows = (value ?? []).map((component) => ({
+    ...component,
+    typeName: component.ociRepo?.name,
+    instances: (component.instances?.items ?? []).filter(
+      Boolean
+    )
+  }));
+  const getInstanceUrl = (instance) => {
+    if (!instance.environment?.id || !instance.id) {
+      return null;
+    }
+    const { scopedEnvironmentId, scopedComponentId } = parseInstanceId(
+      instance.id
+    );
+    return internalRoutes.instance(
+      projectId,
+      scopedEnvironmentId,
+      scopedComponentId
+    );
+  };
+  const columns = [
+    col.custom(
+      "name",
+      "Name",
+      (_value, row) => /* @__PURE__ */ jsxs(NameCell, { children: [
+        /* @__PURE__ */ jsx(
+          IconTile,
+          {
+            src: row.ociRepo?.icon,
+            alt: row.ociRepo?.name,
+            size: "small",
+            fallback: /* @__PURE__ */ jsx(ExtensionIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: row.name })
+      ] }),
+      { flex: 2, minWidth: 220, searchable: true }
+    ),
+    col.text("description", "Description", {
+      flex: 2,
+      minWidth: 200,
+      sortable: false,
+      searchable: true
+    }),
+    col.text("typeName", "Bundle Type", {
+      flex: 1,
+      minWidth: 160,
+      sortable: false
+    }),
+    buildAttributesColumn({
+      directText: "Key-value attributes assigned directly to this component. Attributes cascade to instances of the component across all environments.",
+      effectiveText: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "The full attribute map the authorization system evaluates policies against for this component \u2014 the component's own user attributes plus auto-injected ",
+        /* @__PURE__ */ jsx(Code, { children: "md-*" }),
+        " system attributes."
+      ] })
+    }),
+    col.custom(
+      "status",
+      "Status across environments",
+      (_value, row) => /* @__PURE__ */ jsx(
+        EnvStatusStrip,
+        {
+          instances: row.instances,
+          getInstanceUrl
+        }
+      ),
+      { flex: 3, minWidth: 280, sortable: false, searchable: false }
+    )
+  ];
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Components" }) }),
+    error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) : /* @__PURE__ */ jsx(
+      DataList,
+      {
+        rows,
+        columns,
+        loading,
+        emptyMessage: "No components in this project yet.",
+        variant: "outlined"
+      }
+    )
+  ] });
+};
+const Wrapper = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  maxWidth: 1400,
+  mx: "auto",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const NameCell = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+
+export { ComponentsTab };
+//# sourceMappingURL=ComponentsTab.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsTab.esm.js","sources":["../../../../src/features/project/tabs/ComponentsTab.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { parseInstanceId } from '@massdriver/backstage-plugin-common';\nimport Alert from '@massdriver/ui/Alert';\nimport Box from '@massdriver/ui/Box';\nimport { col } from '@massdriver/ui/DataList';\nimport DataList from '@massdriver/ui/DataList';\nimport IconTile from '@massdriver/ui/IconTile';\nimport Stack from '@massdriver/ui/Stack';\nimport Typography from '@massdriver/ui/Typography';\nimport ExtensionIcon from '@massdriver/ui/icons/ExtensionIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport useAsync from 'react-use/esm/useAsync';\nimport { massdriverApiRef } from '../../../api';\nimport {\n  buildAttributesColumn,\n  Code,\n} from '../../../components/AttributesColumn';\nimport { internalRoutes } from '../../../internalRoutes';\nimport { EnvInstance, EnvStatusStrip } from './EnvStatus';\n\ninterface ComponentRow {\n  id: string;\n  name: string;\n  description?: string | null;\n  attributes?: unknown;\n  effectiveAttributes?: unknown;\n  ociRepo?: { id: string; name?: string; icon?: string } | null;\n  typeName?: string;\n  instances: EnvInstance[];\n}\n\nconst COMPONENTS_QUERY = `\n  query MassdriverProjectComponents($organizationId: ID!, $id: ID!) {\n    project(organizationId: $organizationId, id: $id) {\n      id\n      components {\n        id\n        name\n        description\n        attributes\n        effectiveAttributes\n        ociRepo { id name icon }\n        instances(cursor: { limit: 100 }) {\n          items {\n            id\n            status\n            deployedVersion\n            resolvedVersion\n            availableUpgrade\n            environment { id name }\n          }\n        }\n      }\n    }\n  }\n`;\n\n/** Read-only Components tab: components with status across environments. */\nexport const ComponentsTab = ({ projectId }: { projectId: string }) => {\n  const api = useApi(massdriverApiRef);\n  const { value, loading, error } = useAsync(async () => {\n    const data = (await api.query(COMPONENTS_QUERY, { id: projectId })) as {\n      project: {\n        components?: Array<{\n          id: string;\n          name: string;\n          description?: string | null;\n          attributes?: unknown;\n          effectiveAttributes?: unknown;\n          ociRepo?: { id: string; name?: string; icon?: string } | null;\n          instances?: { items?: (EnvInstance | null)[] | null };\n        }> | null;\n      } | null;\n    };\n    return data.project?.components ?? [];\n  }, [api, projectId]);\n\n  const rows: ComponentRow[] = (value ?? []).map(component => ({\n    ...component,\n    typeName: component.ociRepo?.name,\n    instances: (component.instances?.items ?? []).filter(\n      Boolean,\n    ) as EnvInstance[],\n  }));\n\n  const getInstanceUrl = (instance: EnvInstance): string | null => {\n    if (!instance.environment?.id || !instance.id) {\n      return null;\n    }\n    const { scopedEnvironmentId, scopedComponentId } = parseInstanceId(\n      instance.id,\n    );\n    return internalRoutes.instance(\n      projectId,\n      scopedEnvironmentId,\n      scopedComponentId,\n    );\n  };\n\n  const columns = [\n    col.custom(\n      'name',\n      'Name',\n      (_value: unknown, row: ComponentRow) => (\n        <NameCell>\n          <IconTile\n            src={row.ociRepo?.icon}\n            alt={row.ociRepo?.name}\n            size=\"small\"\n            fallback={<ExtensionIcon />}\n          />\n          <Typography variant=\"body2\">{row.name}</Typography>\n        </NameCell>\n      ),\n      { flex: 2, minWidth: 220, searchable: true },\n    ),\n    col.text('description', 'Description', {\n      flex: 2,\n      minWidth: 200,\n      sortable: false,\n      searchable: true,\n    }),\n    col.text('typeName', 'Bundle Type', {\n      flex: 1,\n      minWidth: 160,\n      sortable: false,\n    }),\n    buildAttributesColumn({\n      directText:\n        'Key-value attributes assigned directly to this component. Attributes cascade to instances of the component across all environments.',\n      effectiveText: (\n        <>\n          The full attribute map the authorization system evaluates policies\n          against for this component — the component's own user attributes plus\n          auto-injected <Code>md-*</Code> system attributes.\n        </>\n      ),\n    }),\n    col.custom(\n      'status',\n      'Status across environments',\n      (_value: unknown, row: ComponentRow) => (\n        <EnvStatusStrip\n          instances={row.instances}\n          getInstanceUrl={getInstanceUrl}\n        />\n      ),\n      { flex: 3, minWidth: 280, sortable: false, searchable: false },\n    ),\n  ];\n\n  return (\n    <Wrapper>\n      <Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n        <Typography variant=\"h6\">Components</Typography>\n      </Stack>\n      {error ? (\n        <Alert severity=\"error\">{String(error.message ?? error)}</Alert>\n      ) : (\n        <DataList\n          rows={rows}\n          columns={columns}\n          loading={loading}\n          emptyMessage=\"No components in this project yet.\"\n          variant=\"outlined\"\n        />\n      )}\n    </Wrapper>\n  );\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 NameCell = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Typography from '@massdriver/ui/Typography';
+import stylin from '@massdriver/ui/stylin';
+import { instanceStatusColors } from '@massdriver/ui/theme';
+import { RouterLinkAdapter } from '../../../components/RouterLinkAdapter.esm.js';
+
+const STATUS_LABELS = {
+  INITIALIZED: "Not deployed yet",
+  PROVISIONED: "Provisioned",
+  DECOMMISSIONED: "Decommissioned",
+  FAILED: "Failed",
+  EXTERNAL: "External"
+};
+const labelFor = (status) => (status && STATUS_LABELS[status]) ?? status ?? "Unknown";
+const colorFor = (status) => (status && instanceStatusColors[status]) ?? instanceStatusColors.INITIALIZED;
+const EnvStatusStrip = ({
+  instances,
+  getInstanceUrl
+}) => {
+  if (!instances || instances.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyText, { variant: "caption", color: "text.secondary", children: "Not deployed in any environment" });
+  }
+  return /* @__PURE__ */ jsx(Strip, { children: instances.map((instance) => /* @__PURE__ */ jsx(
+    EnvStatusChip,
+    {
+      instance,
+      href: getInstanceUrl?.(instance) ?? null
+    },
+    instance.id
+  )) });
+};
+const EnvStatusChip = ({
+  instance,
+  href
+}) => {
+  const color = colorFor(instance.status);
+  const versionLabel = instance.deployedVersion ?? "\u2014";
+  const showResolved = instance.resolvedVersion && instance.resolvedVersion !== instance.deployedVersion;
+  const tooltipRows = [
+    instance.environment?.name && {
+      label: "Environment",
+      value: instance.environment.name
+    },
+    { label: "Status", value: labelFor(instance.status) },
+    {
+      label: "Deployed",
+      value: instance.deployedVersion ? `v${instance.deployedVersion}` : "Not deployed"
+    },
+    showResolved && {
+      label: "Resolves to",
+      value: `v${instance.resolvedVersion}`
+    },
+    instance.availableUpgrade && {
+      label: "Upgrade available",
+      value: `v${instance.availableUpgrade}`
+    }
+  ].filter(Boolean);
+  const content = /* @__PURE__ */ jsxs(Chip, { interactive: Boolean(href), children: [
+    /* @__PURE__ */ jsx(Dot, { color }),
+    /* @__PURE__ */ jsx(Name, { variant: "caption", children: instance.environment?.name }),
+    /* @__PURE__ */ jsx(Version, { variant: "caption", children: versionLabel })
+  ] });
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      arrow: true,
+      enterDelay: 400,
+      placement: "top",
+      slotProps: { tooltip: { sx: { maxWidth: 260 } } },
+      title: /* @__PURE__ */ jsx(TooltipBody, { children: tooltipRows.map((row) => /* @__PURE__ */ jsxs(TooltipRow, { children: [
+        /* @__PURE__ */ jsx(TooltipLabel, { children: row.label }),
+        /* @__PURE__ */ jsx(TooltipValue, { children: row.value })
+      ] }, row.label)) }),
+      children: href ? /* @__PURE__ */ jsx(ChipLink, { href, children: content }) : content
+    }
+  );
+};
+const Strip = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(0.75),
+  alignItems: "center"
+}));
+const EmptyText = stylin(Typography)(({ theme }) => ({
+  fontStyle: "italic",
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5)
+}));
+const ChipLink = stylin(RouterLinkAdapter)({ textDecoration: "none" });
+const Chip = stylin(Box, ["interactive"])(
+  ({ theme, interactive }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(1)}`,
+    borderRadius: theme.custom.general.borderRadiusSm,
+    backgroundColor: theme.palette.background.field,
+    border: `1px solid ${theme.palette.divider}`,
+    textDecoration: "none",
+    transition: "background-color 120ms ease, border-color 120ms ease",
+    ...interactive && {
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: theme.palette.action.hover,
+        borderColor: theme.palette.text.secondary
+      }
+    }
+  })
+);
+const Dot = stylin("span", ["color"])(({ color }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  flexShrink: 0,
+  backgroundColor: color
+}));
+const Name = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: theme.typography.fontWeightMedium
+}));
+const Version = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamilyMono
+}));
+const TooltipBody = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.25)
+}));
+const TooltipRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  fontSize: 11,
+  lineHeight: 1.4
+}));
+const TooltipLabel = stylin("span")({
+  fontWeight: 600,
+  color: "inherit",
+  opacity: 0.75
+});
+const TooltipValue = stylin("span")(({ theme }) => ({
+  color: "inherit",
+  fontFamily: theme.typography.fontFamilyMono
+}));
+
+export { EnvStatusStrip };
+//# sourceMappingURL=EnvStatus.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvStatus.esm.js","sources":["../../../../src/features/project/tabs/EnvStatus.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Typography from '@massdriver/ui/Typography';\nimport stylin from '@massdriver/ui/stylin';\nimport { instanceStatusColors } from '@massdriver/ui/theme';\nimport { RouterLinkAdapter } from '../../../components/RouterLinkAdapter';\n\nexport interface EnvInstance {\n  id: string;\n  status?: string | null;\n  deployedVersion?: string | null;\n  resolvedVersion?: string | null;\n  availableUpgrade?: string | null;\n  environment?: { id: string; name?: string | null } | null;\n}\n\nconst STATUS_LABELS: Record<string, string> = {\n  INITIALIZED: 'Not deployed yet',\n  PROVISIONED: 'Provisioned',\n  DECOMMISSIONED: 'Decommissioned',\n  FAILED: 'Failed',\n  EXTERNAL: 'External',\n};\n\nconst labelFor = (status?: string | null) =>\n  (status && STATUS_LABELS[status]) ?? status ?? 'Unknown';\nconst colorFor = (status?: string | null) =>\n  (status && instanceStatusColors[status]) ?? instanceStatusColors.INITIALIZED;\n\n/** Chips showing an instance's status per environment (mirrors the web app). */\nexport const EnvStatusStrip = ({\n  instances,\n  getInstanceUrl,\n}: {\n  instances?: EnvInstance[] | null;\n  getInstanceUrl?: (instance: EnvInstance) => string | null;\n}) => {\n  if (!instances || instances.length === 0) {\n    return (\n      <EmptyText variant=\"caption\" color=\"text.secondary\">\n        Not deployed in any environment\n      </EmptyText>\n    );\n  }\n  return (\n    <Strip>\n      {instances.map(instance => (\n        <EnvStatusChip\n          key={instance.id}\n          instance={instance}\n          href={getInstanceUrl?.(instance) ?? null}\n        />\n      ))}\n    </Strip>\n  );\n};\n\nconst EnvStatusChip = ({\n  instance,\n  href,\n}: {\n  instance: EnvInstance;\n  href: string | null;\n}) => {\n  const color = colorFor(instance.status);\n  const versionLabel = instance.deployedVersion ?? '—';\n  const showResolved =\n    instance.resolvedVersion &&\n    instance.resolvedVersion !== instance.deployedVersion;\n\n  const tooltipRows = [\n    instance.environment?.name && {\n      label: 'Environment',\n      value: instance.environment.name,\n    },\n    { label: 'Status', value: labelFor(instance.status) },\n    {\n      label: 'Deployed',\n      value: instance.deployedVersion\n        ? `v${instance.deployedVersion}`\n        : 'Not deployed',\n    },\n    showResolved && {\n      label: 'Resolves to',\n      value: `v${instance.resolvedVersion}`,\n    },\n    instance.availableUpgrade && {\n      label: 'Upgrade available',\n      value: `v${instance.availableUpgrade}`,\n    },\n  ].filter(Boolean) as { label: string; value: string }[];\n\n  const content = (\n    <Chip interactive={Boolean(href)}>\n      <Dot color={color} />\n      <Name variant=\"caption\">{instance.environment?.name}</Name>\n      <Version variant=\"caption\">{versionLabel}</Version>\n    </Chip>\n  );\n\n  return (\n    <Tooltip\n      arrow\n      enterDelay={400}\n      placement=\"top\"\n      slotProps={{ tooltip: { sx: { maxWidth: 260 } } }}\n      title={\n        <TooltipBody>\n          {tooltipRows.map(row => (\n            <TooltipRow key={row.label}>\n              <TooltipLabel>{row.label}</TooltipLabel>\n              <TooltipValue>{row.value}</TooltipValue>\n            </TooltipRow>\n          ))}\n        </TooltipBody>\n      }\n    >\n      {href ? <ChipLink href={href}>{content}</ChipLink> : content}\n    </Tooltip>\n  );\n};\n\nconst Strip = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(0.75),\n  alignItems: 'center',\n}));\n\nconst EmptyText = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontStyle: 'italic',\n  paddingTop: theme.spacing(0.5),\n  paddingBottom: theme.spacing(0.5),\n}));\n\nconst ChipLink = stylin(RouterLinkAdapter)({ textDecoration: 'none' });\n\nconst Chip = stylin(Box, ['interactive'])(\n  ({ theme, interactive }: { theme: any; interactive: boolean }) => ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    padding: `${theme.spacing(0.25)} ${theme.spacing(1)}`,\n    borderRadius: theme.custom.general.borderRadiusSm,\n    backgroundColor: theme.palette.background.field,\n    border: `1px solid ${theme.palette.divider}`,\n    textDecoration: 'none',\n    transition: 'background-color 120ms ease, border-color 120ms ease',\n    ...(interactive && {\n      cursor: 'pointer',\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover,\n        borderColor: theme.palette.text.secondary,\n      },\n    }),\n  }),\n);\n\nconst Dot = stylin('span', ['color'])(({ color }: { color: string }) => ({\n  width: 8,\n  height: 8,\n  borderRadius: '50%',\n  flexShrink: 0,\n  backgroundColor: color,\n}));\n\nconst Name = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.primary,\n  fontWeight: theme.typography.fontWeightMedium,\n}));\n\nconst Version = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n  fontFamily: theme.typography.fontFamilyMono,\n}));\n\nconst TooltipBody = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.25),\n}));\n\nconst TooltipRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  fontSize: 11,\n  lineHeight: 1.4,\n}));\n\nconst TooltipLabel = stylin('span')({\n  fontWeight: 600,\n  color: 'inherit',\n  opacity: 0.75,\n});\n\nconst TooltipValue = stylin('span')(({ theme }: { theme: any }) => ({\n  color: 'inherit',\n  fontFamily: theme.typography.fontFamilyMono,\n}));\n"],"names":[],"mappings":"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"}