@massdriver/backstage-plugin 1.0.0

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

@@ -0,0 +1,191 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import Alert from '@massdriver/ui/Alert';
+import LoadingIndicator from '@massdriver/ui/LoadingIndicator';
+import LogViewer from '@massdriver/ui/LogViewer';
+import { InteractiveIconButton, CloseIconButton } from '@massdriver/ui/IconButton';
+import DownloadIcon from '@massdriver/ui/icons/DownloadIcon';
+import stylin from '@massdriver/ui/stylin';
+import { deploymentStatusColors, logSurfaceColors } from '@massdriver/ui/theme';
+import { useLiveRelayQuery } from '../../realtime/useLiveRelayQuery.esm.js';
+import useMassdriverSubscription from '../../../../hooks/useMassdriverSubscription.esm.js';
+import { useResizableWidth } from '../useResizableWidth.esm.js';
+import { DEPLOYMENT_LOGS_SUBSCRIPTION } from '../../realtime/queries.esm.js';
+import { DEPLOYMENT_LOGS_QUERY } from '../queries.esm.js';
+import { composeLogsText, formatDeploymentStatus } from '../helpers.esm.js';
+import { isDeploymentActive } from '../../../../utils/instanceStatuses.esm.js';
+
+const OpenLogsContext = createContext(() => {
+});
+const useOpenLogs = () => useContext(OpenLogsContext);
+const OpenLogsProvider = OpenLogsContext.Provider;
+const downloadLogs = (text, deploymentId) => {
+  const blob = new Blob([text], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `deployment-${deploymentId}.log`;
+  link.click();
+  URL.revokeObjectURL(url);
+};
+const DeploymentLogsPanel = ({
+  deploymentId,
+  onClose
+}) => {
+  const { width, panelRef, onResizeStart } = useResizableWidth();
+  const { value, loading, error } = useLiveRelayQuery(DEPLOYMENT_LOGS_QUERY, { id: deploymentId });
+  const deployment = value?.deployment ?? null;
+  const status = deployment?.status;
+  const active = isDeploymentActive(status);
+  const [streamed, setStreamed] = useState([]);
+  useEffect(() => {
+    setStreamed([]);
+  }, [deployment]);
+  useMassdriverSubscription(
+    DEPLOYMENT_LOGS_SUBSCRIPTION,
+    { deploymentId },
+    {
+      skip: loading || !active,
+      onData: (data) => {
+        const line = data?.deploymentLogs;
+        if (line) setStreamed((previous) => [...previous, line]);
+      }
+    }
+  );
+  const text = useMemo(
+    () => composeLogsText([...deployment?.logs ?? [], ...streamed]),
+    [deployment?.logs, streamed]
+  );
+  const actionLabel = [
+    formatDeploymentStatus(deployment?.action, status),
+    deployment?.instance?.component?.name
+  ].filter((part) => part && part !== "\u2014").join(" \xB7 ");
+  const statusColor = status ? deploymentStatusColors[status] : null;
+  return /* @__PURE__ */ jsxs(Root, { ref: panelRef, style: { width }, children: [
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        onMouseDown: onResizeStart,
+        "data-testid": "logs-resize-handle"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsx(ActionLine, { variant: "subtitle1", title: actionLabel, children: actionLabel || "Deployment logs" }),
+      status ? /* @__PURE__ */ jsx(StatusPill, { statusColor, children: status.toLowerCase() }) : null,
+      /* @__PURE__ */ jsx(
+        SurfaceIconButton,
+        {
+          icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+          ariaLabel: "Download logs",
+          tooltip: "Download logs",
+          onClick: () => downloadLogs(text, deploymentId),
+          disabled: !text
+        }
+      ),
+      /* @__PURE__ */ jsx(SurfaceCloseButton, { onClick: onClose, tooltip: "Close logs" })
+    ] }),
+    /* @__PURE__ */ jsx(Body, { children: loading ? /* @__PURE__ */ jsx(Centered, { children: /* @__PURE__ */ jsx(LoadingIndicator, {}) }) : error ? /* @__PURE__ */ jsx(Padded, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) }) : /* @__PURE__ */ jsx(
+      LogViewer,
+      {
+        text,
+        follow: true,
+        enableLineNumbers: true,
+        enableSearch: true,
+        wrapLines: true
+      }
+    ) })
+  ] });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  maxWidth: "100%",
+  zIndex: 20,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  backgroundColor: logSurfaceColors.bg,
+  borderLeft: `1px solid ${logSurfaceColors.border}`,
+  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 Header = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1.5, 2),
+  height: 57,
+  flexShrink: 0,
+  backgroundColor: logSurfaceColors.bg,
+  borderBottom: `1px solid ${logSurfaceColors.border}`
+}));
+const ActionLine = stylin(Typography)({
+  flex: 1,
+  minWidth: 0,
+  color: logSurfaceColors.textAction,
+  fontWeight: 700,
+  textTransform: "capitalize",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+const StatusPill = stylin("span", ["statusColor"])(
+  ({ statusColor }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    padding: "2px 8px",
+    borderRadius: "9999px",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    lineHeight: 1.4,
+    textTransform: "lowercase",
+    letterSpacing: "0.02em",
+    color: statusColor || logSurfaceColors.textMuted,
+    backgroundColor: statusColor ? `${statusColor}1f` : "transparent",
+    border: `1px solid ${statusColor ? `${statusColor}33` : logSurfaceColors.border}`
+  })
+);
+const Body = stylin(Box)({
+  flex: 1,
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: logSurfaceColors.bg
+});
+const Centered = stylin(Box)(({ theme }) => ({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: theme.spacing(6)
+}));
+const Padded = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(2)
+}));
+const SurfaceIconButton = stylin(InteractiveIconButton)({
+  color: logSurfaceColors.textMuted,
+  "&:hover": { color: logSurfaceColors.textHover }
+});
+const SurfaceCloseButton = stylin(CloseIconButton)({
+  color: logSurfaceColors.textMuted,
+  "&:hover": { color: logSurfaceColors.textHover }
+});
+
+export { DeploymentLogsPanel, OpenLogsProvider, DeploymentLogsPanel as default, useOpenLogs };
+//# sourceMappingURL=DeploymentLogsPanel.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeploymentLogsPanel.esm.js","sources":["../../../../../src/features/environment/InstanceDrawer/tabs/DeploymentLogsPanel.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport Alert from '@massdriver/ui/Alert';\nimport LoadingIndicator from '@massdriver/ui/LoadingIndicator';\nimport LogViewer from '@massdriver/ui/LogViewer';\nimport {\n  CloseIconButton,\n  InteractiveIconButton,\n} from '@massdriver/ui/IconButton';\nimport DownloadIcon from '@massdriver/ui/icons/DownloadIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport { deploymentStatusColors, logSurfaceColors } from '@massdriver/ui/theme';\nimport { useLiveRelayQuery } from '../../realtime/useLiveRelayQuery';\nimport { useMassdriverSubscription } from '../../../../hooks/useMassdriverSubscription';\nimport { useResizableWidth } from '../useResizableWidth';\nimport { DEPLOYMENT_LOGS_SUBSCRIPTION } from '../../realtime/queries';\nimport { DEPLOYMENT_LOGS_QUERY } from '../queries';\nimport {\n  composeLogsText,\n  formatDeploymentStatus,\n  isDeploymentActive,\n} from '../helpers';\nimport type { DeploymentLogLine, DeploymentLogs } from '../types';\n\n// Lets graph nodes and drawer tabs open the read-only logs drawer. Hosted at\n// the environment-graph page level, matching the web app's page-level\n// DeploymentLogsDrawer. No-op default when rendered outside the graph page.\nconst OpenLogsContext = createContext<(deploymentId: string) => void>(() => {});\n\n/** Open the read-only deployment logs overlay for a deployment id. */\nexport const useOpenLogs = (): ((deploymentId: string) => void) =>\n  useContext(OpenLogsContext);\n\nexport const OpenLogsProvider = OpenLogsContext.Provider;\n\nconst downloadLogs = (text: string, deploymentId: string) => {\n  const blob = new Blob([text], { type: 'text/plain' });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = `deployment-${deploymentId}.log`;\n  link.click();\n  URL.revokeObjectURL(url);\n};\n\n/**\n * Read-only deployment logs drawer. Ported from the web app's\n * `DeploymentLogsDrawer`: fetch the transcript once (`network-only`), then — if\n * the deployment is still active — stream new batches via the `deploymentLogs`\n * subscription and append them. Rendered as a dark, right-anchored, resizable\n * panel over the graph area — same 720px default / 575px minimum as the web\n * app's drawer (Backstage's hybrid runtime doesn't paint MUI Drawer/Modal\n * reliably, so we use a plain Box, as the instance drawer does).\n */\nexport const DeploymentLogsPanel = ({\n  deploymentId,\n  onClose,\n}: {\n  deploymentId: string;\n  onClose: () => void;\n}) => {\n  const { width, panelRef, onResizeStart } = useResizableWidth();\n  // Live query: a deployment finishing while the panel is open bumps the\n  // environment revision → refetch → `active` flips false, which both fixes\n  // the status pill and tears down the log subscription (otherwise the\n  // upstream Absinthe socket would stay open until the panel closes).\n  const { value, loading, error } = useLiveRelayQuery<{\n    deployment: DeploymentLogs | null;\n  }>(DEPLOYMENT_LOGS_QUERY, { id: deploymentId });\n\n  const deployment = value?.deployment ?? null;\n  const status = deployment?.status;\n  const active = isDeploymentActive(status);\n\n  // Log batches streamed after the initial backfill. Each refetched backfill\n  // already contains everything streamed so far — reset the tail so lines\n  // aren't duplicated.\n  const [streamed, setStreamed] = useState<DeploymentLogLine[]>([]);\n  useEffect(() => {\n    setStreamed([]);\n  }, [deployment]);\n\n  useMassdriverSubscription<{ deploymentLogs: DeploymentLogLine | null }>(\n    DEPLOYMENT_LOGS_SUBSCRIPTION,\n    { deploymentId },\n    {\n      skip: loading || !active,\n      onData: data => {\n        const line = data?.deploymentLogs;\n        if (line) setStreamed(previous => [...previous, line]);\n      },\n    },\n  );\n\n  const text = useMemo(\n    () => composeLogsText([...(deployment?.logs ?? []), ...streamed]),\n    [deployment?.logs, streamed],\n  );\n\n  const actionLabel = [\n    formatDeploymentStatus(deployment?.action, status),\n    deployment?.instance?.component?.name,\n  ]\n    .filter(part => part && part !== '—')\n    .join(' · ');\n  const statusColor = status\n    ? (deploymentStatusColors as Record<string, string>)[status]\n    : null;\n\n  return (\n    <Root ref={panelRef} style={{ width }}>\n      <ResizeHandle\n        onMouseDown={onResizeStart}\n        data-testid=\"logs-resize-handle\"\n      />\n      <Header>\n        <ActionLine variant=\"subtitle1\" title={actionLabel}>\n          {actionLabel || 'Deployment logs'}\n        </ActionLine>\n        {status ? (\n          <StatusPill statusColor={statusColor}>\n            {status.toLowerCase()}\n          </StatusPill>\n        ) : null}\n        <SurfaceIconButton\n          icon={<DownloadIcon />}\n          ariaLabel=\"Download logs\"\n          tooltip=\"Download logs\"\n          onClick={() => downloadLogs(text, deploymentId)}\n          disabled={!text}\n        />\n        <SurfaceCloseButton onClick={onClose} tooltip=\"Close logs\" />\n      </Header>\n      <Body>\n        {loading ? (\n          <Centered>\n            <LoadingIndicator />\n          </Centered>\n        ) : error ? (\n          <Padded>\n            <Alert severity=\"error\">{String(error.message ?? error)}</Alert>\n          </Padded>\n        ) : (\n          <LogViewer\n            text={text}\n            follow\n            enableLineNumbers\n            enableSearch\n            wrapLines\n          />\n        )}\n      </Body>\n    </Root>\n  );\n};\n\nexport default DeploymentLogsPanel;\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  maxWidth: '100%',\n  zIndex: 20,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  backgroundColor: logSurfaceColors.bg,\n  borderLeft: `1px solid ${logSurfaceColors.border}`,\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 Header = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(1.5, 2),\n  height: 57,\n  flexShrink: 0,\n  backgroundColor: logSurfaceColors.bg,\n  borderBottom: `1px solid ${logSurfaceColors.border}`,\n}));\n\nconst ActionLine = stylin(Typography)({\n  flex: 1,\n  minWidth: 0,\n  color: logSurfaceColors.textAction,\n  fontWeight: 700,\n  textTransform: 'capitalize',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nconst StatusPill = stylin('span', ['statusColor'])(\n  ({ statusColor }: { statusColor: string | null }) => ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    padding: '2px 8px',\n    borderRadius: '9999px',\n    fontSize: '0.75rem',\n    fontWeight: 600,\n    lineHeight: 1.4,\n    textTransform: 'lowercase',\n    letterSpacing: '0.02em',\n    color: statusColor || logSurfaceColors.textMuted,\n    backgroundColor: statusColor ? `${statusColor}1f` : 'transparent',\n    border: `1px solid ${\n      statusColor ? `${statusColor}33` : logSurfaceColors.border\n    }`,\n  }),\n);\n\nconst Body = stylin(Box)({\n  flex: 1,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: logSurfaceColors.bg,\n});\n\nconst Centered = stylin(Box)(({ theme }: { theme: any }) => ({\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(6),\n}));\n\nconst Padded = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(2),\n}));\n\nconst SurfaceIconButton = stylin(InteractiveIconButton)({\n  color: logSurfaceColors.textMuted,\n  '&:hover': { color: logSurfaceColors.textHover },\n});\n\nconst SurfaceCloseButton = stylin(CloseIconButton)({\n  color: logSurfaceColors.textMuted,\n  '&:hover': { color: logSurfaceColors.textHover },\n});\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Button from '@massdriver/ui/Button';
+import stylin from '@massdriver/ui/stylin';
+import { DisabledAction } from '../../../../components/DisabledAction.esm.js';
+
+const DisabledApprovalCluster = ({
+  size = "small"
+}) => /* @__PURE__ */ jsxs(Cluster, { children: [
+  /* @__PURE__ */ jsx(
+    DisabledAction,
+    {
+      label: "Plan",
+      size,
+      variant: "outlined",
+      color: "primary",
+      tooltip: "Read-only. Open in Massdriver to plan this deployment."
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    DisabledAction,
+    {
+      label: "Reject",
+      size,
+      variant: "outlined",
+      color: "error",
+      tooltip: "Read-only. Open in Massdriver to reject this deployment."
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    DisabledAction,
+    {
+      label: "Approve",
+      size,
+      variant: "contained",
+      color: "primary",
+      tooltip: "Read-only. Open in Massdriver to approve this deployment."
+    }
+  )
+] });
+const DisabledRollbackButton = ({ size = "small" }) => /* @__PURE__ */ jsx(
+  DisabledAction,
+  {
+    label: "Rollback",
+    size,
+    variant: "outlined",
+    tooltip: "Read-only. Open in Massdriver to roll back to this deployment."
+  }
+);
+const LogsButton = ({
+  onClick,
+  size = "small",
+  variant = "text"
+}) => /* @__PURE__ */ jsx(Button, { variant, size, onClick, children: "View logs" });
+const Cluster = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  flexWrap: "wrap"
+}));
+
+export { DisabledApprovalCluster, DisabledRollbackButton, LogsButton };
+//# sourceMappingURL=DeploymentReadOnlyActions.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeploymentReadOnlyActions.esm.js","sources":["../../../../../src/features/environment/InstanceDrawer/tabs/DeploymentReadOnlyActions.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Button from '@massdriver/ui/Button';\nimport stylin from '@massdriver/ui/stylin';\nimport DisabledAction from '../../../../components/DisabledAction';\n\n// Read-only mirrors of the web app's deployment mutations. Every mutating\n// affordance is rendered as a greyed `DisabledAction` (tooltip points the user\n// to Massdriver); viewing logs is a genuine in-app action (opens the read-only\n// logs overlay), not disabled and not a link-out.\n\ntype Size = 'small' | 'medium' | 'large';\n\n/** Disabled Plan / Reject / Approve cluster shown on PROPOSED deployments. */\nexport const DisabledApprovalCluster = ({\n  size = 'small',\n}: {\n  size?: Size;\n}) => (\n  <Cluster>\n    <DisabledAction\n      label=\"Plan\"\n      size={size}\n      variant=\"outlined\"\n      color=\"primary\"\n      tooltip=\"Read-only. Open in Massdriver to plan this deployment.\"\n    />\n    <DisabledAction\n      label=\"Reject\"\n      size={size}\n      variant=\"outlined\"\n      color=\"error\"\n      tooltip=\"Read-only. Open in Massdriver to reject this deployment.\"\n    />\n    <DisabledAction\n      label=\"Approve\"\n      size={size}\n      variant=\"contained\"\n      color=\"primary\"\n      tooltip=\"Read-only. Open in Massdriver to approve this deployment.\"\n    />\n  </Cluster>\n);\n\n/** Disabled Rollback shown on completed PROVISION deployments. */\nexport const DisabledRollbackButton = ({ size = 'small' }: { size?: Size }) => (\n  <DisabledAction\n    label=\"Rollback\"\n    size={size}\n    variant=\"outlined\"\n    tooltip=\"Read-only. Open in Massdriver to roll back to this deployment.\"\n  />\n);\n\n/** Opens the read-only deployment logs overlay in-app. */\nexport const LogsButton = ({\n  onClick,\n  size = 'small',\n  variant = 'text',\n}: {\n  onClick: () => void;\n  size?: Size;\n  variant?: 'text' | 'outlined' | 'contained';\n}) => (\n  <Button variant={variant} size={size} onClick={onClick}>\n    View logs\n  </Button>\n);\n\nconst Cluster = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexWrap: 'wrap',\n}));\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,0BAA0B,CAAC;AAAA,EACtC,IAAA,GAAO;AACT,CAAA,0BAGG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,IAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,KAAA,EAAM,SAAA;AAAA,MACN,OAAA,EAAQ;AAAA;AAAA,GACV;AAAA,kBACA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,IAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,KAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAQ;AAAA;AAAA,GACV;AAAA,kBACA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,SAAA;AAAA,MACN,IAAA;AAAA,MACA,OAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAM,SAAA;AAAA,MACN,OAAA,EAAQ;AAAA;AAAA;AACV,CAAA,EACF;AAIK,MAAM,sBAAA,GAAyB,CAAC,EAAE,IAAA,GAAO,SAAQ,qBACtD,GAAA;AAAA,EAAC,cAAA;AAAA,EAAA;AAAA,IACC,KAAA,EAAM,UAAA;AAAA,IACN,IAAA;AAAA,IACA,OAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAQ;AAAA;AACV;AAIK,MAAM,aAAa,CAAC;AAAA,EACzB,OAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,OAAA,GAAU;AACZ,CAAA,qBAKE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAkB,IAAA,EAAY,SAAkB,QAAA,EAAA,WAAA,EAExD;AAGF,MAAM,UAAU,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC1D,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACpB,QAAA,EAAU;AACZ,CAAA,CAAE,CAAA;;;;"}

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

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import GuideMarkdown from '@massdriver/ui/GuideMarkdown';
+import MenuBookOutlinedIcon from '@massdriver/ui/icons/MenuBookOutlinedIcon';
+import stylin from '@massdriver/ui/stylin';
+import { TabState } from '../TabState.esm.js';
+import { GUIDE_QUERY } from '../queries.esm.js';
+import { useInstanceApiQuery } from '../useInstanceApiQuery.esm.js';
+
+const GuideTab = ({ instanceId }) => {
+  const { value, loading, error } = useInstanceApiQuery(GUIDE_QUERY, instanceId);
+  const operatorGuide = value?.instance?.operatorGuide;
+  return /* @__PURE__ */ jsx(TabState, { loading, error, children: operatorGuide ? /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(GuideMarkdown, { children: operatorGuide }) }) : /* @__PURE__ */ jsxs(Empty, { children: [
+    /* @__PURE__ */ jsx(IconCircle, { children: /* @__PURE__ */ jsx(MenuBookOutlinedIcon, {}) }),
+    /* @__PURE__ */ jsx(EmptyTitle, { variant: "body2", children: "No operator guide" }),
+    /* @__PURE__ */ jsx(EmptyDescription, { variant: "caption", children: "This bundle's author hasn't published an operator guide yet." })
+  ] }) });
+};
+const Body = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(1)
+}));
+const Empty = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(6, 2),
+  textAlign: "center"
+}));
+const IconCircle = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: theme.spacing(6),
+  height: theme.spacing(6),
+  borderRadius: "50%",
+  backgroundColor: theme.palette.action.hover,
+  color: theme.palette.text.disabled,
+  "& svg": { width: theme.spacing(3), height: theme.spacing(3) }
+}));
+const EmptyTitle = stylin(Typography)({ fontWeight: 600 });
+const EmptyDescription = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+
+export { GuideTab, GuideTab as default };
+//# sourceMappingURL=GuideTab.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GuideTab.esm.js","sources":["../../../../../src/features/environment/InstanceDrawer/tabs/GuideTab.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport GuideMarkdown from '@massdriver/ui/GuideMarkdown';\nimport MenuBookOutlinedIcon from '@massdriver/ui/icons/MenuBookOutlinedIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport { TabState } from '../TabState';\nimport { GUIDE_QUERY } from '../queries';\nimport { useInstanceApiQuery } from '../useInstanceApiQuery';\n\n/** Read-only Guide tab: renders the bundle's operator guide markdown. */\nexport const GuideTab = ({ instanceId }: { instanceId: string | null }) => {\n  const { value, loading, error } = useInstanceApiQuery<{\n    instance: { id: string; operatorGuide?: string | null } | null;\n  }>(GUIDE_QUERY, instanceId);\n\n  const operatorGuide = value?.instance?.operatorGuide;\n\n  return (\n    <TabState loading={loading} error={error}>\n      {operatorGuide ? (\n        <Body>\n          <GuideMarkdown>{operatorGuide}</GuideMarkdown>\n        </Body>\n      ) : (\n        <Empty>\n          <IconCircle>\n            <MenuBookOutlinedIcon />\n          </IconCircle>\n          <EmptyTitle variant=\"body2\">No operator guide</EmptyTitle>\n          <EmptyDescription variant=\"caption\">\n            This bundle's author hasn't published an operator guide yet.\n          </EmptyDescription>\n        </Empty>\n      )}\n    </TabState>\n  );\n};\n\nexport default GuideTab;\n\nconst Body = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(1),\n}));\n\nconst Empty = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(6, 2),\n  textAlign: 'center',\n}));\n\nconst IconCircle = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: theme.spacing(6),\n  height: theme.spacing(6),\n  borderRadius: '50%',\n  backgroundColor: theme.palette.action.hover,\n  color: theme.palette.text.disabled,\n  '& svg': { width: theme.spacing(3), height: theme.spacing(3) },\n}));\n\nconst EmptyTitle = stylin(Typography)({ fontWeight: 600 });\n\nconst EmptyDescription = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n}));\n"],"names":[],"mappings":";;;;;;;;;;AAUO,MAAM,QAAA,GAAW,CAAC,EAAE,UAAA,EAAW,KAAqC;AACzE,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,OAAM,GAAI,mBAAA,CAE/B,aAAa,UAAU,CAAA;AAE1B,EAAA,MAAM,aAAA,GAAgB,OAAO,QAAA,EAAU,aAAA;AAEvC,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EACzB,QAAA,EAAA,aAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAe,QAAA,EAAA,aAAA,EAAc,CAAA,EAChC,CAAA,wBAEC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA,EACxB,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAAA,oBAC7C,GAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAU,QAAA,EAAA,8DAAA,EAEpC;AAAA,GAAA,EACF,CAAA,EAEJ,CAAA;AAEJ;AAIA,MAAM,OAAO,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EACvD,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC;AAC1B,CAAA,CAAE,CAAA;AAEF,MAAM,QAAQ,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EACxD,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACpB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC,CAAA;AAAA,EAC3B,SAAA,EAAW;AACb,CAAA,CAAE,CAAA;AAEF,MAAM,aAAa,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC7D,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,QAAA;AAAA,EAChB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACtB,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACvB,YAAA,EAAc,KAAA;AAAA,EACd,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,MAAA,CAAO,KAAA;AAAA,EACtC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,QAAA;AAAA,EAC1B,OAAA,EAAS,EAAE,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA,EAAG,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAC7D,CAAA,CAAE,CAAA;AAEF,MAAM,aAAa,MAAA,CAAO,UAAU,EAAE,EAAE,UAAA,EAAY,KAAK,CAAA;AAEzD,MAAM,mBAAmB,MAAA,CAAO,UAAU,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC1E,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAC5B,CAAA,CAAE,CAAA;;;;"}