Repository: apache/airflow
File: airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx (TypeScript)

Code before:
            </VStack>

            <Separator my={2} />

            {/* Depth Section */}
            <VStack align="stretch" gap={2} width="100%">
              <Text fontSize="xs" fontWeight="semibold">
                {translate("dag:panel.taskStreamFilter.depth")}
              </Text>
              <Input
                disabled={currentTaskId === undefined || !hasActiveFilter}
                min={0}
                onChange={(event) => {
                  const { value } = event.target;

                  buildFilterSearch({
                    depth: value,
                    downstream: includeDownstream,
                    root: filterRoot,
                    upstream: includeUpstream,
                  });
                }}
                onKeyDown={(event) => {
                  event.stopPropagation();
                }}
                placeholder="All"
                size="sm"
                type="number"
                value={depth ?? ""}
              />
            </VStack>

            <Separator my={2} />

            {/* Mode Section */}
            <VStack align="stretch" gap={2} width="100%">
              <Text fontSize="xs" fontWeight="semibold">
                {translate("dag:panel.taskStreamFilter.mode")}
              </Text>
              <ButtonGroup attached colorPalette="brand" size="sm" variant="outline" width="100%">
                <Button
                  disabled={!hasActiveFilter}
                  flex="1"
                  onClick={() => {
                    searchParams.set("mode", "static");
                    setSearchParams(searchParams);
                  }}
                  variant={mode === "static" ? "solid" : "outline"}
                >
                  {translate("dag:panel.taskStreamFilter.modes.static")}
                </Button>

Review comment (suggestion):
This should be pulled from a translation string. We already have it in `common.json`

Code after:
            </VStack>

            <Separator my={2} />

            {/* Depth Section */}
            <VStack align="stretch" gap={2} width="100%">
              <Text fontSize="xs" fontWeight="semibold">
                {translate("dag:panel.taskStreamFilter.depth")}
              </Text>
              <Input
                disabled={currentTaskId === undefined || !hasActiveFilter}
                min={0}
                onChange={(event) => {
                  const { value } = event.target;

                  buildFilterSearch({
                    depth: value,
                    downstream: includeDownstream,
                    root: filterRoot,
                    upstream: includeUpstream,
                  });
                }}
                onKeyDown={(event) => {
                  event.stopPropagation();
                }}
                placeholder={translate("common:expression.all")}
                size="sm"
                type="number"
                value={depth ?? ""}
              />
            </VStack>

            <Separator my={2} />

            {/* Mode Section */}
            <VStack align="stretch" gap={2} width="100%">
              <Text fontSize="xs" fontWeight="semibold">
                {translate("dag:panel.taskStreamFilter.mode")}
              </Text>
              <ButtonGroup attached colorPalette="brand" size="sm" variant="outline" width="100%">
                <Button
                  disabled={!hasActiveFilter}
                  flex="1"
                  onClick={() => {
                    searchParams.set("mode", "static");
                    setSearchParams(searchParams);
                  }}
                  variant={mode === "static" ? "solid" : "outline"}
                >
                  {translate("dag:panel.taskStreamFilter.modes.static")}
                </Button>