Function CommitGraph

minecommit-gui/src/components/commit-graph.tsx:502–631

({
  commits,
  truncateHash = 8,
  railWidth = 24,
  className,
  ...props
}: CommitGraphProps)

// Main component

function CommitGraph({
  commits,
  truncateHash = 8,
  railWidth = 24,
  className,
  ...props
}: CommitGraphProps) {
  // Simple mode: if no commit has parents, infer a linear topology
  const hasTopology = commits.some((c) => c.parents && c.parents.length > 0)
  const resolvedCommits = hasTopology
    ? commits
    : commits.map((c, i) => ({
        ...c,
        parents: i < commits.length - 1 ? [commits[i + 1].hash] : [],
      }))

  if (resolvedCommits.length === 0) {
    return (
      <div
        data-slot="commit-graph"
        className={cn(
          "flex items-center justify-center rounded-xl border border-border/60 bg-card py-10 text-sm text-muted-foreground shadow-sm",
          className
        )}
        {...props}
      >
        No commits.
      </div>
    )
  }

  const rows = computeLayout(resolvedCommits)
  const maxRails = Math.max(
    ...rows.map((r) =>
      Math.max(
        r.rail + 1,
        r.rails.length,
        ...r.edges.map((e) => Math.max(e.fromRail, e.toRail) + 1)
      )
    )
  )
  const svgWidth = maxRails * railWidth

  return (
    <div
      data-slot="commit-graph"
      className={cn(
        "overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm",
        className
      )}
      {...props}
    >
      <div className="flex flex-col overflow-x-auto">
        {rows.map((row, i) => (
          <CommitDetail
            key={`${row.commit.hash}-${i}`}
            commit={row.commit}
            hashLength={truncateHash}