Concurrency self serve

apps/webapp/app/assets/icons/ConcurrencyIcon.tsx

@@ -0,0 +1,13 @@
+export function ConcurrencyIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="3.75" cy="3.75" r="2.25" fill="currentColor" />
+      <circle cx="9" cy="3.75" r="2.25" fill="currentColor" />
+      <circle cx="14.25" cy="3.75" r="2.25" fill="currentColor" />
+      <circle cx="3.75" cy="9" r="2.25" fill="currentColor" />
+      <circle cx="9" cy="9" r="2.25" fill="currentColor" />
+      <circle cx="9" cy="14.25" r="1.75" stroke="currentColor" />
+      <circle cx="14.25" cy="9" r="2.25" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/components/Feedback.tsx

@@ -2,7 +2,7 @@ import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import { InformationCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid";
 import { EnvelopeIcon } from "@heroicons/react/24/solid";
-import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
+import { Form, useActionData, useLocation, useNavigation, useSearchParams } from "@remix-run/react";
 import { type ReactNode, useEffect, useState } from "react";
 import { type FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
 import { Button } from "./primitives/Buttons";
@@ -23,10 +23,12 @@ import { DialogClose } from "@radix-ui/react-dialog";
 type FeedbackProps = {
   button: ReactNode;
   defaultValue?: FeedbackType;
+  onOpenChange?: (open: boolean) => void;
 };
 
-export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
+export function Feedback({ button, defaultValue = "bug", onOpenChange }: FeedbackProps) {
   const [open, setOpen] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
@@ -52,8 +54,26 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
     }
   }, [navigation, form]);
 
+  // Handle URL param functionality
+  useEffect(() => {
+    const open = searchParams.get("feedbackPanel");
+    if (open) {
+      setType(open as FeedbackType);
+      setOpen(true);
+      // Clone instead of mutating in place
+      const next = new URLSearchParams(searchParams);
+      next.delete("feedbackPanel");
+      setSearchParams(next);
+    }
+  }, [searchParams]);
+
+  const handleOpenChange = (value: boolean) => {
+    setOpen(value);
+    onOpenChange?.(value);
+  };
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>{button}</DialogTrigger>
       <DialogContent>
         <DialogHeader>Contact us</DialogHeader>

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -24,6 +24,7 @@ import { Link, useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
+import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
 import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
 import { RunsIconExtraSmall } from "~/assets/icons/RunsIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
@@ -43,6 +44,7 @@ import {
   accountPath,
   adminPath,
   branchesPath,
+  concurrencyPath,
   logoutPath,
   newOrganizationPath,
   newProjectPath,
@@ -122,6 +124,7 @@ export function SideMenu({
   const { isConnected } = useDevPresence();
   const isFreeUser = currentPlan?.v3Subscription?.isPaying === false;
   const isAdmin = useHasAdminAccess();
+  const { isManagedCloud } = useFeatures();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -313,6 +316,15 @@ export function SideMenu({
               data-action="preview-branches"
               badge={<V4Badge />}
             />
+            {isManagedCloud && (
+              <SideMenuItem
+                name="Concurrency"
+                icon={ConcurrencyIcon}
+                activeIconColor="text-amber-500"
+                to={concurrencyPath(organization, project, environment)}
+                data-action="concurrency"
+              />
+            )}
             <SideMenuItem
               name="Regions"
               icon={GlobeAmericasIcon}

apps/webapp/app/components/primitives/Input.tsx

@@ -44,6 +44,24 @@ const variants = {
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
+  "outline/large": {
+    container: "px-1 h-10 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    input: "px-2 rounded text-sm",
+    iconSize: "size-4 ml-1",
+    accessory: "pr-1",
+  },
+  "outline/medium": {
+    container: "px-1 h-8 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    input: "px-1 rounded text-sm",
+    iconSize: "size-4 ml-0.5",
+    accessory: "pr-1",
+  },
+  "outline/small": {
+    container: "px-1 h-6 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    input: "px-1 rounded text-xs",
+    iconSize: "size-3 ml-0.5",
+    accessory: "pr-0.5",
+  },
 };
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {

apps/webapp/app/components/primitives/InputNumberStepper.tsx

@@ -0,0 +1,220 @@
+import { MinusIcon, PlusIcon } from "@heroicons/react/20/solid";
+import { type ChangeEvent, useRef } from "react";
+import { cn } from "~/utils/cn";
+
+type InputNumberStepperProps = Omit<JSX.IntrinsicElements["input"], "min" | "max" | "step"> & {
+  step?: number;
+  min?: number;
+  max?: number;
+  round?: boolean;
+  controlSize?: "base" | "large";
+};
+
+export function InputNumberStepper({
+  value,
+  onChange,
+  step = 50,
+  min,
+  max,
+  round = true,
+  controlSize = "base",
+  name,
+  id,
+  disabled = false,
+  readOnly = false,
+  className,
+  placeholder = "Type a number",
+  ...props
+}: InputNumberStepperProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleStepUp = () => {
+    if (!inputRef.current || disabled) return;
+
+    // If rounding is enabled, ensure we start from a rounded base before stepping
+    if (round) {
+      // If field is empty, treat as 0 (or min if provided) before stepping up
+      if (inputRef.current.value === "") {
+        inputRef.current.value = String(min ?? 0);
+      } else {
+        commitRoundedFromInput();
+      }
+    }
+    inputRef.current.stepUp();
+    const event = new Event("change", { bubbles: true });
+    inputRef.current.dispatchEvent(event);
+  };
+
+  const handleStepDown = () => {
+    if (!inputRef.current || disabled) return;
+
+    // If rounding is enabled, ensure we start from a rounded base before stepping
+    if (round) {
+      // If field is empty, treat as 0 (or min if provided) before stepping down
+      if (inputRef.current.value === "") {
+        inputRef.current.value = String(min ?? 0);
+      } else {
+        commitRoundedFromInput();
+      }
+    }
+    inputRef.current.stepDown();
+    const event = new Event("change", { bubbles: true });
+    inputRef.current.dispatchEvent(event);
+  };
+
+  const numericValue = value === "" ? NaN : (value as number);
+  const isMinDisabled = min !== undefined && !Number.isNaN(numericValue) && numericValue <= min;
+  const isMaxDisabled = max !== undefined && !Number.isNaN(numericValue) && numericValue >= max;
+
+  function clamp(val: number): number {
+    if (Number.isNaN(val)) return typeof value === "number" ? value : min ?? 0;
+    let next = val;
+    if (min !== undefined) next = Math.max(min, next);
+    if (max !== undefined) next = Math.min(max, next);
+    return next;
+  }
+
+  function roundToStep(val: number): number {
+    if (step <= 0) return val;
+    const base = min ?? 0;
+    const shifted = val - base;
+    const quotient = shifted / step;
+    const floored = Math.floor(quotient);
+    const ceiled = Math.ceil(quotient);
+    const down = base + floored * step;
+    const up = base + ceiled * step;
+    const distDown = Math.abs(val - down);
+    const distUp = Math.abs(up - val);
+    return distUp < distDown ? up : down;
+  }
+
+  function commitRoundedFromInput() {
+    if (!inputRef.current || disabled || readOnly) return;
+    const el = inputRef.current;
+    const raw = el.value;
+    if (raw === "") return; // do not coerce empty to 0; keep placeholder visible
+    const numeric = Number(raw);
+    if (Number.isNaN(numeric)) return; // ignore non-numeric
+    const rounded = clamp(roundToStep(numeric));
+    if (String(rounded) === String(value)) return;
+    // Update the real input's value for immediate UI feedback
+    el.value = String(rounded);
+    // Invoke consumer onChange with the real element as target/currentTarget
+    onChange?.({
+      target: el,
+      currentTarget: el,
+    } as unknown as ChangeEvent<HTMLInputElement>);
+  }
+
+  const sizeStyles = {
+    base: {
+      container: "h-9",
+      input: "text-sm px-3",
+      button: "size-6",
+      icon: "size-3.5",
+      gap: "gap-1 pr-1.5",
+    },
+    large: {
+      container: "h-11 rounded-md",
+      input: "text-base px-3.5",
+      button: "size-8",
+      icon: "size-5",
+      gap: "gap-[0.3125rem] pr-[0.3125rem]",
+    },
+  } as const;
+
+  const size = sizeStyles[controlSize];
+
+  return (
+    <div
+      className={cn(
+        "flex items-center rounded border border-charcoal-600 bg-tertiary transition hover:border-charcoal-550/80 hover:bg-charcoal-600/80",
+        size.container,
+        "has-[:focus-visible]:outline has-[:focus-visible]:outline-1 has-[:focus-visible]:outline-offset-0 has-[:focus-visible]:outline-text-link",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="number"
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => {
+          // Allow empty string to pass through so user can clear the field
+          if (e.currentTarget.value === "") {
+            // reflect emptiness in the input and notify consumer as empty
+            if (inputRef.current) inputRef.current.value = "";
+            onChange?.({
+              target: e.currentTarget,
+              currentTarget: e.currentTarget,
+            } as ChangeEvent<HTMLInputElement>);
+            return;
+          }
+          onChange?.(e);
+        }}
+        onBlur={(e) => {
+          // If blur is caused by clicking our step buttons, we prevent pointerdown
+          // so blur shouldn't fire. This is for safety in case of keyboard focus move.
+          if (round) commitRoundedFromInput();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && round) {
+            e.preventDefault();
+            commitRoundedFromInput();
+          }
+        }}
+        step={step}
+        min={min}
+        max={max}
+        disabled={disabled}
+        readOnly={readOnly}
+        className={cn(
+          "placeholder:text-muted-foreground h-full grow border-0 bg-transparent text-left text-text-bright outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed",
+          size.input,
+          // Hide number input arrows
+          "[type=number]:border-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        )}
+        {...props}
+      />
+
+      <div className={cn("flex items-center", size.gap)}>
+        <button
+          type="button"
+          onClick={handleStepDown}
+          onPointerDown={(e) => e.preventDefault()}
+          disabled={disabled || isMinDisabled}
+          aria-label={`Decrease by ${step}`}
+          className={cn(
+            "flex items-center justify-center rounded border border-error/30 bg-error/20 transition",
+            size.button,
+            "hover:border-error/50 hover:bg-error/30",
+            "disabled:cursor-not-allowed disabled:opacity-40",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-link"
+          )}
+        >
+          <MinusIcon className={cn("text-error", size.icon)} />
+        </button>
+
+        <button
+          type="button"
+          onClick={handleStepUp}
+          onPointerDown={(e) => e.preventDefault()}
+          disabled={disabled || isMaxDisabled}
+          aria-label={`Increase by ${step}`}
+          className={cn(
+            "flex items-center justify-center rounded border border-success/30 bg-success/10 transition",
+            size.button,
+            "hover:border-success/40 hover:bg-success/20",
+            "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-link"
+          )}
+        >
+          <PlusIcon className={cn("text-success", size.icon)} />
+        </button>
+      </div>
+    </div>
+  );
+}