@stoked-ui/github 0.0.0-a.0

package/node/GithubEvents/EventTypes/PullRequest/PullRequestEvent.js

@@ -0,0 +1,381 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PullRequestEvent;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography4 = _interopRequireDefault(require("@mui/material/Typography"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _Chip3 = _interopRequireDefault(require("@mui/material/Chip"));
+var _CircularProgress2 = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _CallMade = _interopRequireDefault(require("@mui/icons-material/CallMade"));
+var _PullRequestView = _interopRequireDefault(require("./PullRequestView"));
+var _apiHandlers = require("packages/sui-github/src/apiHandlers");
+var _jsxRuntime = require("react/jsx-runtime");
+var _CheckoutIcon, _Typography2, _Typography3, _CircularProgress; // import Stack from '@mui/material/Stack';
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+async function getPRDetails({
+  apiUrl,
+  params
+}) {
+  if (apiUrl) {
+    const response = await fetch(`${apiUrl}?owner=${params.owner}&repo=${params.repo}&pull_number=${params.pull_number}`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch PR details');
+    }
+    return response.json();
+  }
+  return (0, _apiHandlers.getPullRequestDetails)(params);
+}
+function PullRequestEvent({
+  event,
+  apiUrl
+}) {
+  var _event$payload, _event$payload2, _pullRequest$base, _pullRequest$head, _pullRequest$user, _pullRequest$user2, _Typography, _Chip, _Chip2;
+  const [loading, setLoading] = React.useState(true);
+  const [prDetails, setPrDetails] = React.useState(null);
+  const [error, setError] = React.useState(null);
+
+  // Use a ref to track if we've already loaded data for this PR
+  const requestIdRef = React.useRef(null);
+  const currentRequestId = `${event.repo}-${(_event$payload = event.payload) == null || (_event$payload = _event$payload.pull_request) == null ? void 0 : _event$payload.number}`;
+
+  // Prevent navigation only from anchors in the title and buttons
+  const handleLinkClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Optional: Open the link in a new tab if needed
+    // const href = (e.currentTarget as HTMLAnchorElement).href;
+    // window.open(href, '_blank', 'noopener,noreferrer');
+  };
+
+  // Check if event is valid
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const pullRequest = (_event$payload2 = event.payload) == null ? void 0 : _event$payload2.pull_request;
+  if (!pullRequest) {
+    return null;
+  }
+
+  // Extract repo, branches and user info
+  const repoFullName = event.repo;
+  const [repoOwner, repoName] = repoFullName.split('/');
+  const baseBranch = ((_pullRequest$base = pullRequest.base) == null ? void 0 : _pullRequest$base.ref) || 'unknown';
+  const headBranch = ((_pullRequest$head = pullRequest.head) == null ? void 0 : _pullRequest$head.ref) || 'unknown';
+  const authorLogin = ((_pullRequest$user = pullRequest.user) == null ? void 0 : _pullRequest$user.login) || event.user;
+  const authorAvatar = ((_pullRequest$user2 = pullRequest.user) == null ? void 0 : _pullRequest$user2.avatar_url) || event.avatarUrl;
+
+  // Check if PR is deleted or closed before making API call
+  const isPRDeleted = event.payload.action === 'deleted' || pullRequest.state === 'closed' || pullRequest.state === 'merged';
+  React.useEffect(() => {
+    // Skip if this is the same PR we've already loaded
+    if (requestIdRef.current === currentRequestId && prDetails !== null) {
+      return;
+    }
+
+    // Track the current request
+    requestIdRef.current = currentRequestId;
+    let isMounted = true;
+    const fetchPRDetails = async () => {
+      try {
+        // If PR is deleted, don't make the API call
+        if (isPRDeleted) {
+          if (isMounted) {
+            setLoading(false);
+            setPrDetails({
+              title: pullRequest.title,
+              number: pullRequest.number,
+              state: pullRequest.state,
+              merged: pullRequest.merged,
+              user: pullRequest.user,
+              created_at: pullRequest.created_at,
+              updated_at: pullRequest.updated_at,
+              closed_at: pullRequest.closed_at,
+              merged_at: pullRequest.merged_at,
+              commits_list: [],
+              files: []
+            });
+          }
+          return;
+        }
+        if (isMounted) {
+          setLoading(true);
+          setError(null);
+        }
+        try {
+          // Extract owner and repo from the repository URL
+          let owner, repo;
+          try {
+            const repoUrl = new URL(pullRequest.html_url);
+            const pathParts = repoUrl.pathname.split('/').filter(Boolean);
+            if (pathParts.length >= 2) {
+              owner = pathParts[0];
+              repo = pathParts[1];
+            } else {
+              throw new Error('Invalid repository URL');
+            }
+          } catch (urlError) {
+            // Fallback to the repo name if URL parsing fails
+            const [fallbackOwner, fallbackRepo] = repoFullName.split('/');
+            owner = fallbackOwner;
+            repo = fallbackRepo;
+          }
+          if (!owner || !repo || !pullRequest.number) {
+            throw new Error('Missing required information to fetch PR details');
+          }
+          const params = {
+            owner,
+            repo,
+            pull_number: pullRequest.number
+          };
+          const data = await getPRDetails({
+            apiUrl,
+            params
+          });
+          if (isMounted) {
+            setPrDetails(data);
+          }
+        } catch (err) {
+          console.error('Error fetching PR details:', err);
+          if (isMounted) {
+            setError(err instanceof Error ? err.message : 'Failed to load PR details');
+          }
+        } finally {
+          if (isMounted) {
+            setLoading(false);
+          }
+        }
+      } catch (err) {
+        console.error('Error in PR details flow:', err);
+        if (isMounted) {
+          setLoading(false);
+          setError('An unexpected error occurred');
+        }
+      }
+    };
+    fetchPRDetails();
+
+    // Cleanup function to prevent state updates if component unmounts
+    return () => {
+      isMounted = false;
+    };
+  }, [currentRequestId, isPRDeleted]); // Only depend on the request ID, not the entire object
+
+  const handleCheckout = hash => {
+    // TODO: Implement checkout functionality
+  };
+
+  // PR Header component with context info
+  const PrHeader = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      mb: 2
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        display: 'flex',
+        alignItems: 'top',
+        justifyContent: 'space-between',
+        mb: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          flexWrap: 'wrap'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography4.default, {
+          variant: "caption",
+          color: "text.secondary",
+          children: event.date
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip3.default, {
+          label: `${repoOwner}/${repoName}`,
+          size: "small",
+          color: "primary",
+          variant: "outlined"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip3.default, {
+          label: `#${pullRequest.number}`,
+          size: "small",
+          color: "default"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip3.default, {
+          label: pullRequest.state,
+          size: "small",
+          color: pullRequest.state === 'open' ? 'success' : 'error'
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        sx: {
+          height: 'min-content',
+          padding: '8px',
+          '@media (min-width:40px)': {
+            display: 'none'
+          },
+          textTransform: 'none'
+        },
+        variant: "outlined",
+        size: "small",
+        startIcon: _CheckoutIcon || (_CheckoutIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallMade.default, {})),
+        onClick: e => {
+          e.preventDefault();
+          handleCheckout();
+        },
+        children: "Checkout"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography4.default, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        href: pullRequest.html_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        onClick: handleLinkClick,
+        children: pullRequest.title
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        src: authorAvatar,
+        alt: authorLogin,
+        sx: {
+          width: 24,
+          height: 24
+        }
+      }), _Typography || (_Typography = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography4.default, {
+        variant: "body2",
+        children: authorLogin
+      })), _Typography2 || (_Typography2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography4.default, {
+        variant: "body2",
+        color: "text.secondary",
+        children: "wants to merge from"
+      })), _Chip || (_Chip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip3.default, {
+        label: headBranch,
+        size: "small",
+        color: "default",
+        variant: "outlined"
+      })), _Typography3 || (_Typography3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography4.default, {
+        variant: "body2",
+        color: "text.secondary",
+        children: "into"
+      })), _Chip2 || (_Chip2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip3.default, {
+        label: baseBranch,
+        size: "small",
+        color: "default",
+        variant: "outlined"
+      }))]
+    })]
+  });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        p: '16px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          p: 4
+        },
+        children: _CircularProgress || (_CircularProgress = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress2.default, {}))
+      })]
+    });
+  }
+  if (error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        p: '16px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography4.default, {
+        color: "error",
+        children: error
+      }), isPRDeleted && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography4.default, {
+        color: "text.secondary",
+        sx: {
+          mt: 1
+        },
+        children: ["This pull request is no longer available.", pullRequest.state === 'merged' && ' It has been merged.', pullRequest.state === 'closed' && ' It has been closed.', event.payload.action === 'deleted' && ' It has been deleted.']
+      })]
+    });
+  }
+  if (!prDetails) {
+    return null;
+  }
+
+  // Transform the PR details into the format expected by PullRequestView
+  const transformedCommits = (prDetails.commits_list || []).map(commit => {
+    var _commit$author;
+    return {
+      id: commit.sha,
+      message: commit.commit.message,
+      author: {
+        name: commit.commit.author.name,
+        avatar: ((_commit$author = commit.author) == null ? void 0 : _commit$author.avatar_url) || ''
+      },
+      date: commit.commit.author.date,
+      hash: commit.sha
+    };
+  });
+  const transformedFiles = (prDetails.files || []).map(file => ({
+    path: file.path,
+    type: file.type,
+    additions: file.additions,
+    deletions: file.deletions,
+    diff: file.diff
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      p: '16px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PullRequestView.default, {
+      title: "" // Set to empty to avoid duplicate title
+      ,
+      number: prDetails.number,
+      commits: transformedCommits,
+      files: transformedFiles,
+      onCheckout: handleCheckout
+    })]
+  });
+}
+
+// Helper function to parse diff content into line objects
+// function parseDiff(patch: string): Array<{ type: 'addition' | 'deletion' | 'context'; content: string; lineNumber: number }> {
+//   if (!patch) return [];
+//
+//   return patch.split('\n').map((line, index) => {
+//     if (line.startsWith('+')) {
+//       return {
+//         type: 'addition',
+//         content: line,
+//         lineNumber: index + 1,
+//       };
+//     } else if (line.startsWith('-')) {
+//       return {
+//         type: 'deletion',
+//         content: line,
+//         lineNumber: index + 1,
+//       };
+//     } else {
+//       return {
+//         type: 'context',
+//         content: line,
+//         lineNumber: index + 1,
+//       };
+//     }
+//   });
+// }

package/node/GithubEvents/EventTypes/PullRequest/PullRequestView.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PullRequestView;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
+var _CommitsList = _interopRequireDefault(require("./CommitsList"));
+var _FileChanges = _interopRequireDefault(require("./FileChanges"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "value", "index"]; // Custom styled components to match GitHub's UI
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledTabs = (0, _styles.styled)(_Tabs.default)(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '& .MuiTab-root': {
+    textTransform: 'none',
+    minHeight: 48,
+    padding: '0 16px',
+    color: theme.palette.text.secondary,
+    '&.Mui-selected': {
+      color: theme.palette.text.primary
+    }
+  }
+}));
+const StatsBox = (0, _styles.styled)(_Box.default)(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  padding: theme.spacing(1, 2),
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${theme.palette.divider}`
+}));
+function TabPanel(props) {
+  const {
+      children,
+      value,
+      index
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+    role: "tabpanel",
+    hidden: value !== index,
+    id: `pr-tabpanel-${index}`,
+    "aria-labelledby": `pr-tab-${index}`
+  }, other, {
+    children: value === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        p: 3
+      },
+      children: children
+    })
+  }));
+}
+function PullRequestView({
+  title,
+  number,
+  commits,
+  files,
+  onCheckout
+}) {
+  const [tabValue, setTabValue] = React.useState(0);
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+  const totalAdditions = files.reduce((sum, file) => sum + file.additions, 0);
+  const totalDeletions = files.reduce((sum, file) => sum + file.deletions, 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      width: '100%'
+    },
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        mb: 2
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+        variant: "h5",
+        component: "h1",
+        children: [title, " #", number]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        borderBottom: 1,
+        borderColor: 'divider'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTabs, {
+        value: tabValue,
+        onChange: handleTabChange,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          label: `Commits (${commits.length})`,
+          id: "pr-tab-0"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          label: `Files changed (${files.length})`,
+          id: "pr-tab-1"
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanel, {
+      value: tabValue,
+      index: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommitsList.default, {
+        commits: commits,
+        onCheckout: onCheckout
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabPanel, {
+      value: tabValue,
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          mb: 2
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StatsBox, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+            variant: "body2",
+            component: "span",
+            children: ["Showing ", files.length, " changed files with ", totalAdditions, " additions and ", totalDeletions, " deletions"]
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileChanges.default, {
+        files: files
+      })]
+    })]
+  });
+}

package/node/GithubEvents/EventTypes/PushEvent.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PushEvent;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function PushEvent({
+  event
+}) {
+  var _event$ref, _event$payload;
+  if (!(event != null && event.date)) {
+    return null;
+  }
+  const commitMessage = event.description || 'No commit message available';
+  const commitUrl = event.url || `https://github.com/${event.repo}`;
+  const branchName = ((_event$ref = event.ref) == null ? void 0 : _event$ref.replace('refs/heads/', '')) || 'main';
+  const commits = ((_event$payload = event.payload) == null ? void 0 : _event$payload.commits) || [];
+  const commitCount = commits.length;
+  // const firstCommit = commits[0];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      p: '16px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 2
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "caption",
+        color: "text.secondary",
+        children: event.date
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        label: branchName,
+        size: "small",
+        color: "default"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        label: `${commitCount} commit${commitCount !== 1 ? 's' : ''}`,
+        size: "small",
+        color: "primary"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "h6",
+      component: "h3",
+      sx: {
+        mb: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        href: commitUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          textDecoration: 'none'
+        },
+        children: commitMessage
+      })
+    }), commits.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        mt: 2
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "subtitle2",
+        sx: {
+          mb: 1
+        },
+        children: "Commits:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        component: "ul",
+        sx: {
+          listStyle: 'none',
+          p: 0,
+          m: 0,
+          '& li': {
+            mb: 1,
+            '&:last-child': {
+              mb: 0
+            }
+          }
+        },
+        children: commits.map((commit, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          component: "li",
+          sx: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "body2",
+            component: "span",
+            sx: {
+              color: 'text.secondary',
+              minWidth: '7ch'
+            },
+            children: commit.sha.substring(0, 7)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "body2",
+            children: commit.message
+          })]
+        }, index))
+      })]
+    })]
+  });
+}