Show warning box when you’ve hit the concurrency in the past 30 days

apps/webapp/app/components/billing/ConcurrentRunsChart.tsx

@@ -2,6 +2,7 @@ import {
   Label,
   Line,
   LineChart,
+  Rectangle,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
@@ -30,8 +31,6 @@ export function ConcurrentRunsChart({
   concurrentRunsLimit?: number;
   data: { name: string; maxConcurrentRuns: number }[];
 }) {
-  console.log(data);
-
   return (
     <div className="relative">
       <Header3 className="mb-4">Concurrent Runs</Header3>
@@ -81,7 +80,7 @@ export function ConcurrentRunsChart({
 
 function ReferenceLineLabel({ y }: { y: number }) {
   return (
-    <text x={0} y={y} fill={"#94A3B8"}>
+    <text x={0} y={y} fill={"#F43F5E"}>
       <tspan x={"8em"} dy={"0.3em"}>
         Concurrency limit
       </tspan>

apps/webapp/app/presenters/OrgUsagePresenter.server.ts

@@ -219,7 +219,6 @@ function fillInMissingConcurrencyDays(
   days: number,
   data: Array<{ day: Date; max_concurrent_runs: BigInt }>
 ) {
-  console.log("inputData", data);
   const outputData: Array<{ name: string; maxConcurrentRuns: number }> = [];
   for (let i = 0; i < days; i++) {
     const date = new Date(startDate);

apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx

@@ -51,29 +51,35 @@ export default function Page() {
   const loaderData = useTypedLoaderData<typeof loader>();
   const currentPlan = useCurrentPlan();
 
-  console.log(currentPlan);
+  const hitConcurrencyLimit = currentPlan?.subscription?.limits.concurrentRuns
+    ? loaderData.concurrencyData.some(
+        (c) => c.maxConcurrentRuns >= currentPlan.subscription!.limits.concurrentRuns!
+      )
+    : false;
 
   return (
     <div className="flex flex-col gap-4">
       <div>
         <Header2 spacing>Concurrent Runs</Header2>
         <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
-          <Callout
-            variant={"pricing"}
-            cta={
-              <LinkButton
-                variant="primary/small"
-                LeadingIcon={ArrowUpCircleIcon}
-                leadingIconClassName="px-0"
-                to={plansPath(organization)}
-              >
-                Increase concurrent Runs
-              </LinkButton>
-            }
-          >
-            Some of your Runs are being queued because the number of concurrent Runs is limited to
-            50.
-          </Callout>
+          {hitConcurrencyLimit && (
+            <Callout
+              variant={"pricing"}
+              cta={
+                <LinkButton
+                  variant="primary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                  leadingIconClassName="px-0"
+                  to={plansPath(organization)}
+                >
+                  Increase concurrent Runs
+                </LinkButton>
+              }
+            >
+              {`Some of your Runs are being queued because the number of concurrent Runs is limited to
+            ${currentPlan?.subscription?.limits.concurrentRuns}.`}
+            </Callout>
+          )}
           <ConcurrentRunsChart
             data={loaderData.concurrencyData}
             concurrentRunsLimit={currentPlan?.subscription?.limits.concurrentRuns}